En este artículo vamos a desarrollar un útil conjunto de botones animados potenciado por múltiples fondos y animaciones de CSS3. Con este paquete de botones, puedes convertir fácilmente un enlace de la página en un botón animado solamente asignando el nombre de la clase. Para este tutorial no es necesario JavaScript. Hemos generado cuatro themes de colores y tres tamaños mediante la asignación de nombres de clases adicionales.
El HTML
Para convertir un enlace normal de tu página en un botón de CSS3 animado, sólo tienes que asignar la clase .button y uno de los cuatro colores soportados. Vamos a ver algunos ejemplos a continuación:
<a href="#" class="button blue big">Download</a>
<a href="#" class="button blue medium">Submit</a>
<a href="#" class="button small blue rounded">Submit</a>
Existen cuatro clases de color disponibles: azul, verde, naranja y gris (blue, green, orange y gray). El resto de las clases, que puedes ver asignadas en los enlaces de arriba, son opcionales. Puedes elegir el tamaño entre pequeño, mediano y grande, y una clase más, redondeado, (small, medium, big y rounded) que crea una versión más redondeada del botón.
Los nombres de las clases se eligen de modo que sean sencillos y fáciles de recordar, pero esto plantea la posibilidad de que choquen con algunas de las clases de tu página.
Vamos a echar un vistazo más de cerca a las clases CSS que hacen esto posible.
El CSS
Todo el código CSS para generar los botones animados reside en el fichero buttons.css. Esto hace que sea fácil de integrar en un proyecto existente y utilizarlo.
Date cuenta de que en el código de abajo, he definido dos versiones de la misma propiedad en distintos sitios. Esto tiene que ver con la forma en que los navegadores manejan las definiciones CSS. Ellos parsean las reglas una por una y las aplican, haciendo caso omiso de las que no entienden. De esta manera podemos tener una versión sencilla de la regla que es entendida por todos, y que las reglas de CSS3 sean ignoradas por los navegadores más viejos.
buttons/buttons.css
.button{
font:15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position:bottom left;
background-image:url('button_bg.png');
/* CSS3 background positioning property with multiple values. The background
images themselves are defined in the individual color classes */
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Applying a default border radius of 8px */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* A 1px highlight inside of the button */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
Lo primero que tenemos que hacer es definir la clase de botón. Esta es la columna vertebral de los botones, en donde se aplican los estilos para el posicionamiento, la fuente y el fondo.
En primer lugar están los estilos relacionados con las fuentes, después de las cuales seguiríamos con la propiedad display. Se establece en inline-block, lo que le permite situarse en la misma línea que su texto circundante (como lo haría un elemento inline), además de comportarse como un bloque en lo que respecta a paddings y márgenes.
Como verás en un momento, a cada botón se le aplican cuatro imágenes de fondo. Aunque esto suena intimidante, sólo se solicita un archivo desde el servidor. Los dos primeros fondos son la parte inferior izquierda y superior derecha inferior de la imagen de las burbuja, la cual puedes ver en la siguiente ilustración, y los otros dos fondos son degradados con CSS puro.
Como he mencionado anteriormente, el fondo de la burbuja se muestra como dos imágenes individuales, que se compensan con la propiedad background-position. Usando la propiedad transition de CSS3, definimos una animación en la que las dos versiones de la imagen de fondo se mueven a la parte superior o inferior respectivamente. Esto crea un efecto mediante las burbujas que se ve cuando se posa el ratón sobre los botones.
Vamos a hablar un poco sobre el tamaño y los estilos redondeados.
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
Aquí tienes las tres clases de tamaños: pequeño, mediano y grande, y la clase redondeada. Los botones escalan en función de su tamaño del texto. De esta manera se puede especificar el ancho y el alto del botón.
Ahora vamos a pasar a la parte interesante, los colores. A continuación puedes ver la definición para el botón azul. El resto son casi idénticos.
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
Cada clase de color define un conjunto único de propiedades único: el color de la etiqueta de texto de los botones, la sombra del texto y un conjunto de imágenes de fondo. Nótese que estamos utilizando la propiedad background para añadir varias imágenes al botón. Estas se colocan en capas una encima de la otra. Las que se definan primero, aparecerán en la parte superior.
En el código anterior, puedes ver que definimos un gradiente lineal y una radial en la parte superior del mismo. Para hacer que los gradientes se mezclen con más facilidad, tanto en las sintaxis WebKit y Mozilla estamos definiendo uno radial con RGBA, que hace que el color exterior del gradiente sea transparente.
Con esto, nuestro botones animados con burbujas estarían completos.
Fuente: tutorialzine.com