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.

<button>

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="http://diywpblog.com/" method="get">
<button>Visit Website</button>
</form>

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="http://diywpblog.com/" method="get">
<button class="my_linkable_button">Visit Website</button>
</form>

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.

Bonus

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.

HTML 5

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

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

Current day month ye@r *