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