Linkable Buttons with HTML 5

Since HTML 5 is gaining momentum and users are now shifting towards using buttons to link content over just a simply text link I thought I would share with you the correct method to link your content.

The Wrong Way to link buttons

Most people would simply do something like this.

<a href="#"><button>Click Me</button></a>

Although this will provide you with the desired results of simply linking from A to B, it is in fact the wrong way to do it.

W3C states that the you can nest any element inside the <a> element with some exceptions.


being one of them.

The Right Way to link buttons

The correct way to link a button element would be to wrap it in a form like this.

<form action="" method="get">
<button>Visit Website</button>

Which would produce the a button that links to my home page, in this case.

Of course you can add a class and style the button to give you the desired look.

<form action="" method="get">
<button class="my_linkable_button">Visit Website</button>

Apply some CSS

.my_linkable_button {
    background: none repeat scroll 0 0 #075482;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    margin-bottom: 26px;
    padding: 8px;

which would give you a button like this.

You can style the button however you like.


Notice that I added

cursor: pointer;

to my CSS, well if you add that to your style sheet like so.

a, button, input[type="submit"] {
cursor: pointer;

it will ensure that your buttons, submit buttons and links all display the correct cursor when you hover over it.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

4 comments… add one
  • Puneet Sahalot May 16, 2013, 9:43 pm

    Hi Matthew!

    That’s a nice tip.
    However this is what I usually do when I want to make a “Link” look like a “Button”

    a.some-class-name {display:inline-block; padding:5px 10px; background:#111; color:#fff; }

    Most of the times users find it easier than writing HTML for input and button tags. 🙂

  • Apollo May 31, 2013, 3:24 pm

    I think it is good that there is more than one option which means everyone can find the best solution for them. Thanks for sharing this.

  • JZ May 13, 2014, 9:03 pm

    I dig this technique – as the author points out, buttons come with some perks that are worth considering, in my case I didn’t want to override the default outline-on-focus effect for buttons and links, but I wanted that effect to be consistent across a list of options in which the tags were a hodgepodge of “button” and “a” tags.

Leave a Comment