Como Crear Botones con Css3

Como Crear Botones con Css3

Español | Online

Descripción:
Aprenderemos a crear botones con estilo css3 como border-radius, box-shadow, transition, linear-gradient por cierto muy bonitos para que puedan usarlo en sus páginas web, obvio que los mejorarán aún mas.

Pues Manos a la Obra!

El HTML aplicado para este demo sera:

<a href="#" class="button">Boton con CSS3</a>

Se ha creado un enlace simple al cual le agregamos el atributo class=”button”

El estilo CSS3
Primero crearemos nuestra clase .button definiendo su estilo basico.

.button{

    background:#e5e5e5;

    display:inline-block;

    margin:0 6px;

    padding:7px 20px 7px;

    color:#333;

    text-decoration:none;

    text-shadow: 0 1px 1px #FFF;

    border:1px solid #ccc;

}

El resultado seria este:

Redondeamos los bordes del boton con border-radius

  

-webkit-border-radius:4px;

 -moz-border-radius:4px;

 border-radius:4px;

 Ahora modificaremos el fondo(background) con un degradado vertical usando la propiedad css3 linear-gradient 
Muy importante! hay que tener en cuenta la compatibilidad de los navegadores ya que no todos leen las mismas reglas CSS

background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */

background: -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */

background: -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */

background: linear-gradient(top, #fefefe, #e5e5e5);

 Luego agregamos 3 tipos de sombras a la clase separadas por “,” con box-shadow y rgba para aplicar transparencias.




-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

-moz-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

 y para hacer “cool” nuestro boton le agregaremos un efecto de transicion, que se vera al pasar el cursor sobre el boton :hover, con la propiedad css3 transition, con la cual se pueden realizar animaciones.

-webkit-transition: all ease-in-out .3s;

-moz-transition: all ease-in-out .3s;

transition: all ease-in-out .3s;

Donde el Resultado será:

.button{

    background:#e5e5e5;

    display:inline-block;

    margin:0 6px;

    padding:7px 20px 7px;

    color:#333;

    text-decoration:none;

    text-shadow: 0 1px 1px #FFF;

    border:1px solid #ccc;

    /* Bordes redondenados - Border Radius */

    -webkit-border-radius:4px;

    -moz-border-radius:4px;

    border-radius:4px;

    /* Fondo Degradado - Background Gradient */

    background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */

    background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */

    background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */

    background:        linear-gradient(top, #fefefe, #e5e5e5);

    /* Aplcamos sombras al boton - Box Shadow */

    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

    box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

    /* Animacion - Transition */

    -webkit-transition: all ease-in-out .3s;

    -moz-transition: all ease-in-out .3s;

    transition: all ease-in-out .3s;

}

 

Efecto :hover(Es aquel que va a cambiar cuando el mouse pase por encima del botón)Usando la propiedad css :hover(ubicar el cursor sobre un elemento), modificaremos algunas propiedades de la clase .button para darle un efecto elegante.

.button:hover{

    border-color:#adcce2; /* Modificamos el color del borde */

    /* Cambiamos los colores del fondo degradado */

    background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */

    background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */

    background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */

    background:        linear-gradient(top, #fefefe, #f1f1f1);

    /* Modificamos las propiedades del Box Shadow para un efecto Glow */

    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);

    -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);

    box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);

}