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

Leave a Comment

Current month ye@r day *

Comments

  • 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. :)

    Reply
  • 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.

    Reply

This site rocks the DIYWP Optimized Skin for Thesis & is hosted by Webhostingbuzz