Las cosas que hacen más atractivo a un sitio web, se encuentran por lo general en la usabilidad y en la interface con el usuario. Y los botones animados son uno de los elementos más impactantes dentro de nuestra página.
En este artículo te enseño como crear atractivos botones animados con CSS3 sin utilizar Flash.
Con la llegada de CSS3, la creación de botones animados ya no es nada complicado.
Olvídate de tener que generar animaciones en Flash, o de diseñar los botones en Photoshop.
CSS3 nos brinda excelentes herramientas para lograr resultados más que atractivos.
EJEMPLO PRACTICO
Vamos a ver un ejemplo de un simple botón, que al clickear, lograremos un efecto animado de hundimiento.
Primero, en nuestro documento HTML, generaremos el botón y el texto que contendrá, por medio de la etiqueta de link A, y le aplicaremos 2 clases, una llamada “boton” y la otra “rojo” (luego las crearemos):
<a>Click Aquí</a>
Ahora comenzaremos con el CSS.
Primero daremos al documento (body) un color de fondo, un margen superior y una lineación centrada:
body{
background: #d0d9d4;
padding-top: 10%;
text-align: center;
}
Luego definimos la clase “boton” que contendrá los estilos del texto interior y de la animación:
.boton{
color: #fff;
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
padding: 15px 25px;
margin-right: 30px;
cursor: pointer;
border: 0;
position: relative;
bottom: 0;
border-radius: 30px;
transition: all 0.20s linear;
-webkit-transition: all 0.20s linear;
-moz-transition: all 0.20s linear;
}
Aquí hemos definido el color de la tipografía, familia, tamaño, peso, márgenes, estilo de cursos y borde.
Luego, por medio de la propiedad CSS3 “border-radius”, redondeamos los bordes (ver Bordes Redondeados)
Y en las ultimas 3 propiedades definimos la animación por medio de CSS3.
La idea de este artículo no es entrar en detalle sobre la sintaxis de CSS3, sino de demostrar el poder que esta nueva tecnología posee.
Por ello, solo diremos que la propiedad “transition” es la encargada de realizar la animación desde un estado A, a un estado B.
En este caso, la primera está sin prefijos de navegador, la segunda con el prefijo de compatibilidad para Chrome y Safari (-webkit), y la tercera para Firefox (-moz)
“all” especifica cuáles de las propiedades CSS vamos a modificar, “0.20s” es el tiempo de la animación, y “linear” la forma en que el tiempo transcurre, en este caso, de forma uniforme.
Luego creamos la clase “rojo” que se encarga de estilizar el fondo del botón:
.rojo{
background: #bf1b04;
box-shadow: 0px 5px 0 #8F1502;
}
Posteriormente, creamos la pseudo-clase “botón:active” que corresponde a como se verá el botón cuando tengamos presionado el click del mouse sobre él, en este caso, se desplazará 5px hacia abajo:
.boton:active{
bottom: -5px;
}
Luego, creamos la pseudo-clase “rojo:active” donde cambiamos las sombras del botón al clickearlo:
.rojo:active{
box-shadow:0 0 0 #9a1604, inset 0 0 5px #000000;
background: #ff0000;
}
Aquí lo que especificamos por medio del atributo de CSS3 “box-shadow” (ver Generación de Sombras), es que cuando se clickee el botón, la sombra roja inferior se vuelva del color del botón sin desplazamiento, y se agregue una sombra interior negra de 5 px, creando así un efecto de hundido.
Además, cambiamos el color del botón a rojo intenso.
Aquí el código completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Botón animado en CSS3</title>
<style type="text/css">
body{
background: #d0d9d4;
padding-top: 10%;
text-align: center;
}
.boton{
/* estilos para la tipografia del botón*/
color: #fff;
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
padding: 15px 25px;
margin-right: 30px;
cursor: pointer;
border: 0;
border-radius: 30px;
/* propiedades para la animacion del boton */
transition: all 0.20s linear;
-webkit-transition: all 0.20s linear;
-moz-transition: all 0.20s linear;
position: relative;
bottom: 0;
}
.rojo{
/* Estilos para el fondo del boton */
background: #bf1b04;
box-shadow: 0px 5px 0 #8F1502;
}
.boton:active{
/* Posicion del boton al clickearlo */
bottom: -5px;
}
.rojo:active{
/* Sombra del boton al clickearlo */
box-shadow:0 0 0 #9a1604, inset 0 0 5px #000000;
}
</style>
</head>
<body>
<a>Click Aquí</a>
</body>
</html>
Aquí puedes ver y descargar el ejemplo:
Como podemos ver, gracias a CSS3, podemos crear botones animados sin necesidad de insertar imágenes o películas de Flash, solo escribiendo unas cuantas líneas de código.
Saludos!
Cristian
Muy bueno el articulo, quedan geniales los botones animados
Un sludo
Si la verdad que son un recurso bien interesante.
Saludos!
Excelente brother… en serio muchas gracias… 😀
Hola como hacer que el botón quede estático y no se haga mas pequeño es decir cuando meto una linea de texto mas pequeña
Fabian
PAra que el boton quede estatico debe modificar las propiedades de la psedu-clase «boton:active», alli es donde especificas el estado del boton al clickear en él.
Y si quieres mantener el tamaño del boton al incluir texto mas chicos, debes trabajas con los padding.
Estas son cosas bastante importantes y basicas de CSS y CSS3, te recomiendo el curso completo de maquetacion.
Puedes acceder al él en:
Maquetación con HTML y CSS
Saludos
Cristian