Skip to content

CSS Button Links

Sometimes, plain old hyper links are too dry to make web developers to use it. They may want versatile ways to decorate a link.

If you choose a button to behave a link, there are 3 ways for your references.

Enclose a <a> tag around <button>

<a href='http://www.howtosop.com'>
  <button>
  Visit My Blog!!
  </button>
</a>

The output is:

It's very easy to understand, and no form conflicts.

Use Javascript onClick to go to the destination.

<input type='button' onclick='location.href="http://www.howtosop.com"' value='Visit My Blog!!'>

The output is:

One input tag can do all things.

Submit a simple form to redirect to the destination.

<form action='http://www.howtosop.com'>
  <input type='submit' value='Visit My Blog!!'>
</form>

The output is:

It's a form actually, and it will bring you to the destination via submit.

You can see those different approaches can make the same result.

Leave a Reply

Your email address will not be published. Required fields are marked *