Aquí un botón juguetón con el efecto "Hover" ;o)
<div id="button">
<span class="aa">
<span class="bb">
<a class="fatbutt" href="#">Linktext</a>
</span>
</span>
</div>
#button {
position: relative;/*para IE*/
width: 8em;
padding: 1px;
border: 3px solid;
border-color: #e2bf87 #78561d #78561d #e2bf87;
}
#button .fatbutt,
#button .aa,
#button .bb {
position: relative;/*fuer IE*/
display: block;
}
#button .fatbutt {
padding: 2px 1px 2px 0;
text-decoration: none;
text-align: center;
background-color: #e0d0b0;
color: #600;
border: 3px solid;
border-color: #e7dbc2 #d6c093 #d6c093 #e7dbc2;
}
#button .aa {
padding: 1px;
border: 2px solid;
border-color: #937639 #c2a361 #c2a361 #937639;
}
#button .bb {
border: 1px solid #555;
}
#button a:hover.fatbutt {
padding: 2px 0 2px 1px;
border: 3px solid;
border-color: #d6c093 #ebdfc6 #ebdfc6 #d6c093;
background-color: #e6d9bc;
color: #900;
}