Os muestro a continuación unos efectos para añadir a vuestros botones con CSS3. Son bastante sencillos e iré haciendo más tutoriales con más efectos.
Vamos a ver los efectos de agrandar (grow), reducir (shrink) y una combinación de ambos que es en forma de pulso (pulse). Hay varias formas de hacer botones, con un div <div>, con un enlace <a>, con un input del tipo botón <input type button>, con la etiquete button <button> con una imagen <img>, etc. Yo he ilustrado este tutorial con los cuatro primeros para que veáis que es exactamente igual el resultado independientemente de cómo hagáis el botón. Simplemente hay que añadir la clase correspondiente.
Para comenzar me he creado 4 botones de cuatro formas diferentes. Les he añadido estilos para centrarlos, ponerles colores y demás. No voy a poner ese código aquí, pero si os lo podeis descargar. El código que realmente nos interesa es el de la animación en sí. Para el efecto grow, he creado una clase en css3 y es la siguiente:
Esta clase se la tenemos que asignar a un botón para que tenga ese efecto.
Los otros dos efectos son los siguientes:
Podemos jugar con los valores para aumentar más el efecto de agrandar o disminuirlo, también la duración de ese efecto. La propiedad que hace que un objeto se agrande o disminuya es transform: scale(1.1) y para la duracción utilizaremos transition-duration. Notad que he añadido las líneas necesarias para que estos efectos se reproduzcan en cualquier navegador.
En el caso de la animación pulse, lo que hemos hecho es usar la de agrandar y reducir, y cambiara a partir del porcentaje que le hemos indicado en el keyframes. Por último la animación se la indicamos con animation-name y le ponemos el nombre del keyframes. A parte hay otros valores que podéis ver en el ejemplo
Por último en nuestro html tenemos que asignar las clases a los botones.
Podéis ver un ejemplo en JSFIDDLE o descargarlos en GITHUB.
Entradas
