Anchor as button

Where a button element doesn't belong (outside of a form, for example), an anchor can be used with the same visual styles. Indistinguishable to the user from a button, but semantic markup.

by RenaissanceDesign

HTML

<a class="button" href="#result">I am not a button</a>

<p id="result">Created with the assistance of jQuery and the humble <code>&lt;a&gt;</code> element.</p>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.button { 
    border: 1px solid rgba(25, 66, 137, 0.8);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #194289;
    background-image: -o-linear-gradient(bottom, #194289 38%, #4A72B8 69%, #7A98CF 99%);
    background-image: -moz-linear-gradient(bottom, #194289 38%, #4A72B8 69%, #7A98CF 99%);
    background-image: -webkit-linear-gradient(bottom, #194289 38%, #4A72B8 69%, #7A98CF 99%);
    background-image: -ms-linear-gradient(bottom, #194289 38%, #4A72B8 69%, #7A98CF 99%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.38, #194289),
        color-stop(0.69, #4A72B8),
        color-stop(0.99, #7A98CF)
    );
    background-image: linear-gradient(bottom, #194289 38%, #4A72B8 69%, #7A98CF 99%);
    margin: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: .5em 1em;
    float: left;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.button:hover, .button:active {
    border: 1px solid rgba(245, 157, 5, 0.8);
    background-color: #f59d05;
background-image: -o-linear-gradient(bottom, rgb(245,157,5) 35%, rgb(250,220,47) 68%);
background-image: -moz-linear-gradient(bottom, rgb(245,157,5) 35%, rgb(250,220,47) 68%);
background-image: -webkit-linear-gradient(bottom, rgb(245,157,5) 35%, rgb(250,220,47) 68%);
background-image: -ms-linear-gradient(bottom, rgb(245,157,5) 35%, rgb(250,220,47) 68%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.35, rgb(245,157,5)),
    color-stop(0.68, rgb(250,220,47))
);
background-image: linear-gradient(bottom, rgb(245,157,5) 35%, rgb(250,220,47) 68%);    
}

.button:active {
    margin-top: 12px;
   ...

JavaScript

$('.button').click(function(){
    $('#result').toggleClass('active');
    preventDefault(); 
});