Crear botón animado con CSS3

botón animado con css3

botón animado con css3

Hola, que tal… saludos a todos. Hoy he preparado un tutorial bastante sencillo de cómo hacer un botón en css3, que queda como si lo hubiéramos diseñado en algún editor gráfico y además le daremos una sencilla animación al pasar el mouse, por supuesto usando las propiedades de transition de lo nuevo de CSS3. Que por cierto este CSS3 trae muchas novedades en cuanto a animación, que se hace realmente fácil y que veremos en algunos tutoriales que hagamos después, pero hoy nos preocuparemos por diseñar un botón íntegramente con código y además lo animaremos un poco. Así que empecemos.

Ver Demo
Descargar Código

1. Como primer paso, creamos dentro de nuestro archivo HTML un enlace con su clase respectiva a la que llamaremos “ejemplo2”.

HTML

<a href="#" class="ejemplo2">Ejemplo 1</a>

2. A continuación procedemos a crear los estilos CSS que tendrá nuestra clase, nos preocuparemos de ciertas partes del código, específicamente las de más trascendencia para lograr el diseño del botón y su posterior animación, para que sirve cierta parte del código, nada específico pero si lo necesario.

CSS

.ejemplo2{
display: inline-block;
float: left;
height: auto;
width:auto;
margin: 10px 0;
overflow: hidden;
padding:5px 40px;
position: relative;
color: #3c4246;   
font-size: 20px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
text-align:center;
border: 1px solid #6d7479;
border-radius: 20px 20px 20px 20px;
}

Hasta aquí, como puedes ver no hay nada del otro mundo, más que las propiedades habituales de tamaño, posición, márgenes, padding, tamaño de letra, etc. Quizás si tenemos que resaltar alguna parte específica debería ser la de text-shadow, que es la que nos permitirá dar un suave efecto de profundidad al texto y además el border-radius, que nos servirá para darle la forma casi ovalada de nuestro botón, lo demás es lo habitual.

3. Ahora en este paso le agregaremos el estilo de degradado que tiene nuestro botón, para esto usaremos sobre todo los colores en RGB y nos preocupamos de que este código sea compatible con la mayoría de navegadores y por consiguiente con sus versiones anteriores, lo cual siempre es un dolor de cabeza, pero aquí es solo suficiente es un copia y pega y antecediendo los prefijos del navegador en cuestión, como por ejemplo ejemplo “-webkit-“para Chrome y Safari. Para los demás navegadores, allí lo tiene comentado en el código.

CSS

background: -moz-linear-gradient(center top , #8f969b 0%, #787f83 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgba(143,150,155,1)), color-stop(0%,rgba(120,127,131,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,150,155,1) 0%,rgba(120,127,131,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,150,155,1) 0%,rgba(120,127,131,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,150,155,1) 0%,rgba(120,127,131,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,150,155,1) 0%,rgba(120,127,131,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f969b', endColorstr='#787f83',GradientType=0 ); /* IE6-9 */

Para conseguir este efecto usamos dos colores muy cercanos y la interpretación de este pedazo de código es masomenos la siguiente:

(linear-gradient) le decimos que el degradado vaya de un color a otro de manera lineal, ya sea de arriba hacia abajo, de izquierda a derecha o viceversa.
(center top) definimos la ubicación de nuestro degradado,
(rgba(143,150,155,1)) el color en RGB, yo use photoshop para escoger los colores, allí te salen los RGB de cada color.
(0% ) y finalmente su “color stop” que le dice hasta donde debe ir el primer color con respecto al tamaño del elemento.

4. Ya casi estamos terminando con el diseño, ahora agregamos el estilo de las sombras, para que nuestro botón se vea más profesional. Aquí al igual que el paso anterior trabajamos con los colores en RGB y cuidamos que nuestros estilos se muestren en la mayor cantidad de navegadores y sus versiones antiguas o nuevas, simplemente agregando los prefijos que ya vimos anteriormente.

CSS

box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(173, 170, 170, 0.5);
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(173, 170, 170, 0.5);
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(173, 170, 170, 0.5);
-o-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(173, 170, 170, 0.5);
-ms-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(173, 170, 170, 0.5);

5. Hasta aquí ya tenemos el diseño de nuestro bonito botón en CSS3, usando nada más que gradientes, bordes redondeados y sombras bien aplicadas. Ahora es turno de darle algún efecto a nuestro botón cuando el usuario pase el mouse por encima del mismo. Así que trabajaremos el evento “hover” de nuestro botón.

CSS

.ejemplo2:hover{
border: 1px solid #ca8706;
background: -moz-linear-gradient(center top , #f6ad1f 0%, #da9105 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgba(246,173,31,1)), color-stop(0%,rgba(218,145,5,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,173,31,1) 0%,rgba(218,145,5,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,173,31,1) 0%,rgba(218,145,5,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,173,31,1) 0%,rgba(218,145,5,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,173,31,1) 0%,rgba(218,145,5,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6ad1f', endColorstr='#da9105',GradientType=0 ); /* IE6-9 */
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Como ven solo hemos hecho algunos cambios de color, tanto del gradiente como del borde y el color de letra. Algo repetitivo y sencillo. Pero, ya conseguimos que nuestro botón se vea bien y que realice una acción cuando el usuario pasa el mouse por encima, tenemos ahora un botón animado que cambia de color al pasar el mouse. Digamos que hasta allí se ve bastante bien.

6. Sin embargo, no vamos a dejarlo solamente allí, vamos a darle una animación al evento hover de nuestro botón, vamos a hacer que la transición de pasar de su estado normal a su estado hover se vea más agradable y justamente para lograr mejorar esa transición, usaremos la propiedad transition de CSS3.

Usaremos la propiedad transition, para que el cambio de un estado a otro no se vea tan duro y tan del golpe, si no que haremos que el paso de un estado a otro se vea más suave, y por lo tanto más agradable.

Para eso simplemente usamos esta línea de código, que maravilla es el CSS3, las cosas que se pueden hacer con esto.

CSS

transition: all 0.2s linear 0s;

Esta línea de código la agregamos al final de la clase “ejemplo2”, ojo no en el hover, sólo en la clase de estado normal, si lo podemos llamar así. Qué es lo que hace este pequeño código, simplemente le dice que le agregue la propiedad transición a:

(all) a todas las propiedades del botón que se encuentren dentro de “.ejemplo2:hover”, (0.2s) con un tiempo de retardo de 0.2 segundos,
(linear) con un efecto linear, es decir que el efecto use el mismo tiempo desde que inicie hasta que acabe
(0s) el tiempo que tardará la transición en comenzar, normalmente 0.

Finalmente y para dejar todo nuestro trabajo OK, y no tener problemas o reducir los problemas con los demás navegadores, agregamos los prefijos que ya vimos, dejando el código de la siguiente manera.

CSS

transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;

Y así nos queda nuestro botón animado con css3.

Ver Demo
Descargar Código

Artículos que también te interesarán

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Close