Un efecto hover es agregado, reduciendo la caida de la sombra y ajustando los margenes para dar un efecto de boton presionado.
CSS Code for the button
.round_shadow_button {
font: 14px/2.3em trebuchet,arial;
color: #aaa;
text-shadow: 0 1px 0 #fff;
text-align: center;
text-decoration: none;
display: block;
padding: 0 5px;
margin: 3px auto 5px;
background: #fff url(btn.png) repeat-x bottom;
border: 1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 3px 5px #ccc;
-webkit-box-shadow: 0 3px 5px #ccc;
-o-box-shadow: 0 3px 5px #ccc;
box-shadow: 0 3px 5px #ccc;
}
CSS code for the hover.round_shadow_button:hover {
margin: 5px auto 3px;
-moz-box-shadow: 0 0 1px #eee;
-webkit-box-shadow: 0 0 1px #eee;
-o-box-shadow: 0 0 1px #eee;
box-shadow: 0 0 1px #eee;
}
HTML
Ahora para agregar el estilo a un enlace, simplemente agrega la clase a tu link
Click on Me


0 comentarios:
Publicar un comentario