How do I make an html link look like a button?

Apply this class to it

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

<a href="#" class="button">Example</a>

Why not just wrap an anchor tag around a button element.

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.

IMHO, there is a better and more elegant solution. If your link is this:

<a href="http://www.example.com">Click me!!!</a>

The corresponding button should be this:

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

This approach is simpler because it uses simple html elements, so it will work in all the browsers without changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.

The CSS3 appearance property provides a simple way to style any element (including an anchor) with a browser's built-in <button> styles:

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

<body>
  <a class="btn">CSS Button</a>
</body>

CSS Tricks has a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.

If you want nice button with rounded corners, then use this class:

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}

<a href="#" class="link_button">Example</a>

How do I make an html link look like a button?

Related

Recent Posts