Botones En Css3

Sólo algunos otros botones impresionantes CSS3
04 de septiembre 2011
Ya sea que usted está diseñando un sitio web o una aplicación web, que necesitará botones para ello. Ahora, con la ayuda de CSS3,nunca fue más fácil para crear bonitos botones que buscan.
En este artículo usted aprenderá cómo crear algunos botones fresco CSS3 en unos pocos pasos.

Ver demo
Mientras que la última vez que hemoscreado simples botones gradiente CSS3 , esta vez vamos a construir algunos agradables botones CSS3 con iconos.
Con el fin de crear los iconos, este conjunto de botones CSS3 utiliza entidadesHTML . También, gradientes , sombras y muchas otras características de CSS3 no se pierda.
Margen de beneficio mínimo
Botón
Botón simple, con ningún icono.
Añadir
Tenga en cuenta el complemento clase que añade el icono más.
CSS
A continuación puede encontrar los estilos utilizados para crear los botones e iconos:
.button {display : inline - block ;
white-space : nowrap ;
background-color : #ccc ;
background-image : linear - gradient ( top , #eee , #ccc );
filter : progid :DXImageTransform . Microsoft . gradient ( startColorStr = '#eeeeee' , EndColorStr = '#cccccc' );
border : 1px solid #777 ;
padding : 0 1.5em ;
margin : 0.5em ;
font : bold 1em /2em Arial , Helvetica ;
text-decoration : none ;
color : #333 ;
text-shadow : 0 1px 0 rgba ( 255 , 255 , 255 ,. 8 );
border - radius : .2em ;
box - shadow : 0 0 1px1px rgba ( 255 , 255 , 255 ,. 8 ) inset , 0 1px 0 rgba ( 0 , 0 , 0 ,. 3 );
}

.button :hover {
background-color : #ddd ;
background-image : linear - gradient ( top ,#fafafa , #ddd );
filter : progid : DXImageTransform . Microsoft . gradient ( startColorStr = '#fafafa' , EndColorStr = '#dddddd' );
}

.button : activo {
cuadro - sombra : 0...