sábado, 21 de enero de 2012

Como hacer un boton redondeado CSS con efecto Drop Shadow

El boton utiliza el CSS border-radius para los bordes redondeados, box-shadow para un efecto en la sombra y la propiedad CSS text-shadow para dar al link de texto un buen efecto de relieve sutil.
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