<a href="#" class="btn">Кнопка</a>

<style>
.btn{
    /* specify CSS attributes */
    display: inline-block;
    padding: 4px 12px;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    cursor: pointer;
    vertical-align: middle;
    background: #FFF;
    border: 1px solid #CCC;
}
</style>

button State

Pseudo-classes define the dynamic state of the elements that varies over time or through user actions, as well as the position in the document tree.

  • normal
  • highlighted (a :hover pseudo-class)
  • active (pseudo-class :active)
.btn:hover{
    background: #CCC;
    border: 1px solid #AAA;
}

.btn:active{
    background: #777;
    border: 1px solid #999;
}