Esta semana estamos creando un conjunto útil de botones animados con el poder de los múltiples fondos y animaciones de CSS3. Con este paquete de botones, puede convertir fácilmente cualquier enlace de su página en un botón animado simplemente asignando un nombre de clase. No es necesario JavaScript. También hay disponibles cuatro temas de color y tres tamaños asignando nombres de clase adicionales.
El HTML
Para convertir un enlace normal en su página en un elegante botón CSS3 animado, solo necesita asignar el .button clase y uno de los colores soportados. Vea 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>
Hay cuatro clases de colores disponibles:azul, verde, naranja y gris. El resto de clases, que ves asignadas a los enlaces de arriba, son opcionales. Puede elegir un tamaño entre pequeño, mediano y grande, y una clase más:redondeado, 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 entren en conflicto con algunas de las clases de su página.
Ahora echemos un vistazo más de cerca a las clases CSS que hacen esto posible.
El CSS
Todo el código CSS de los botones animados reside en buttons.css . Esto facilita colocarlo en un proyecto existente y usarlo.
Tenga en cuenta que a lo largo del código a continuación, he definido dos versiones de la misma propiedad en varios lugares. Esto tiene que ver con la forma en que los navegadores manejan las definiciones CSS. Analizan las reglas una por una y las aplican, ignorando las que no entienden. De esta manera, podemos tener una versión simple de la regla que sea comprensible para todos, y una versión habilitada para CSS3 que será ignorada por los más antiguos.
botones/botones.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 del botón. Esta es la columna vertebral de los botones, ya que aplica estilos de posición, fuente y fondo.
Primero están los estilos relacionados con la fuente, después de lo cual sigue la propiedad de visualización. Está configurado para bloque en línea , lo que le permite sentarse en la misma línea que el texto que lo rodea (como lo haría un elemento en línea), pero también se comporta como un bloque con respecto a los rellenos y márgenes.
Como verá en un momento, cada botón tiene cuatro imágenes de fondo aplicadas. Aunque esto suena intimidante, en realidad solo se solicita un archivo del servidor. Los primeros dos fondos son la parte inferior izquierda y superior derecha de la imagen de la burbuja, que puede ver en la ilustración a continuación, y los otros dos son degradados CSS puros.
Como mencioné anteriormente, el fondo de la burbuja se muestra como dos imágenes individuales, compensadas con la propiedad de posición de fondo. Con la propiedad de transición de CSS3, definimos una animación en la que las dos versiones de la imagen de fondo se deslizan hacia arriba o hacia abajo respectivamente, lo que crea el efecto de burbuja que se ve al pasar el cursor sobre los botones.
Ahora digamos algunas palabras sobre el tamaño y las clases redondeadas.
/* 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í están las tres clases de tamaño:pequeño, mediano y grande, y la clase redondeada. Los botones se escalan según el tamaño de su texto. De esta forma, no es necesario especificar ancho y alto explícitos.
Ahora pasemos a la parte interesante:los colores. A continuación, solo se proporciona la definición del botón azul, ya que 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 exclusivo de propiedades:el color de la etiqueta textual de los botones, una sombra de texto y un conjunto de imágenes de fondo. Tenga en cuenta que usamos la propiedad de fondo para agregar varias imágenes al botón. Están superpuestos uno encima del otro, con los definidos primero apareciendo en la parte superior.
Por el momento, solo los navegadores Mozilla y Webkit admiten gradientes CSS, pero con sintaxis bastante diferentes. El resto de los navegadores mostrarán el color de fondo alternativo. Es posible que haya notado que no incluimos una versión sin prefijos de las reglas de degradado. Esto se debe al hecho de que los gradientes aún no son una parte oficial de la especificación CSS y no hay acuerdo sobre la sintaxis preferida.
En el fragmento de arriba, puedes ver que estamos definiendo un degradado lineal y uno radial encima. Para hacer que los degradados se mezclen más suavemente, tanto en la sintaxis de webkit como en la de mozilla, estamos definiendo el radial con RGBA, lo que hace que el color exterior del degradado sea completamente transparente.
¡Con esto, nuestros botones de burbujas animados CSS3 están completos!
Palabras de despedida
Estos botones están completamente basados en CSS e integrarlos es extremadamente simple:simplemente suelte la carpeta de botones en algún lugar de su proyecto. Puede crear sus propios colores y formas modificando el archivo CSS.