Crear un botón con un estilo bonito y elegante simplemente usando CSS3 (sin utilizar ningún programa de edicción grafica: photoshop, fireworks, photopaint, etc…) es realmente sencillo.
Destacando principalmente la propiedad text-shadow para generar una pequeña sombra en el texto del botón, border-radius para redondear los bordes del botón y box-shadow para generar una sombra al objeto.
EJEMPLO
Código CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /* Botón */ .boton { display: inline-block; zoom: 2; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 12px Arial; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .boton:hover { text-decoration: none; } /* Redondez */ .redondo { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } /* Color */ .negro { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); } .negro:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); } |
Código HMTL:
1 | <a href="#" class="boton negro redondo">Botón</a> |
Lo malo de esto es que sólo funciona en navegadores como firefox y chrome, internet explorer queda fuera de esto.
Tengo unas lineas de como redondear bordos de tablas:
-moz-border-radius:15px;
-webkit-border-radius:15px;
Esperemos que pronto ie también soporte estas instrucciones de css.