Menu
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With