Botón redondeado con CSS3
11 may 2010 3 comentarios
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:
/* Botón */
.boton {
display: inline-block;
zoom: 2;
*display: inline;
vertical-align: baseline;
cursor: pointer;
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');
}
.boton {
display: inline-block;
zoom: 2;
*display: inline;
vertical-align: baseline;
cursor: pointer;
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:
Mi nombre es Jorge, y soy de León. Desde hace algo más de 6 años trabajo de desarrollador web en las disciplinas de diseño, programación y SEO.
3 Comentarios
venom_mau, el 23/08/2010 a las 16:39:02
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.
kike, el 10/02/2011 a las 11:16:12
oye pero si quiero redondear solo una esquina que debo de hacer??
albert seuba, el 16/02/2011 a las 18:20:29
para redondear una esquina tienes que dividir las caracterísitcas de cada lado, así poder personalizar, por ejemplo:
-webkit-border-radius: 0px 0px 0px 10px;
-moz-border-radius: 0px 0px 0px 10px;
border-radius: 0px 0px 0px 10px;