Style links as buttons in CSS

This is how you can style a link, with a certain class if you like, as a button in your CSS.

Example
Example active

a:link.button-like,
a.button-like {
    background: none repeat scroll 0 0 #E6E6E6;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    height: 20px;
    line-height: 20px;
    margin: 0.2em 0.3em 0.1em 0;
    padding: 2px 5px;
    color: #555555;
    font-weight: normal;
    outline: medium none;
}

a:hover.button-like {
    background: none repeat scroll 0 0 #EFEFEF;
    border: 1px solid #999999;
    text-decoration: none;
}

a:active.button-like,
a.button-like.active {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #999999;
}
Knowledge keywords: