Hoy vamos a dar un paso atrás de las discusiones avanzadas sobre los preprocesadores de CSS y volver a algunos conceptos básicos antiguos. Trabajaremos hasta cuatro botones de CSS súper simples, cada uno con un efecto de animación animado único.
Sigue conmigo y crea tus propios estilos de botones divertidos. También siéntase libre de tomar mi código y usarlo en sus proyectos. Si eres un novato en CSS que busca una buena manera de hacer que tus botones sean más interesantes, ¡este artículo es para ti!
Lo que estamos construyendo
He incluido todos los botones en una demostración para que pueda ver rápidamente todo lo que vamos a revisar hoy. Haga clic en el enlace de abajo para verlos!
Manifestación: Haga clic aquí para lanzar.
Ajustes globales
Antes de comenzar con los botones individuales, aquí hay algunas configuraciones globales que he aplicado en todos los ejemplos.
HTML
Para fines de experimentación, solo uso un enlace simple y lo diseño como un elemento de bloque. Siempre recibo algunos comentarios desagradables sobre esta técnica, si quieres usar una entrada, ¡sé mi invitado!
CSS
Para el CSS, simplemente puse la fuente a Helvetica, me aseguré de que el texto fuera blanco y desactivé cualquier decoración de texto predeterminada (subrayados) para los enlaces.
Botón de crecimiento
Nuestro primer experimento de botón es uno de mis favoritos. Aunque casi siempre esperamos algún tipo de efecto de desplazamiento cuando pasamos el mouse sobre un enlace o botón en la web, generalmente esperamos algo bastante sutil, así que esta viene con una bonita sorpresa: ¡cambia su forma!
La idea básica es que tiene un botón simple con un mensaje, en nuestro ejemplo usaremos "Registrarse ahora". Luego, cuando se desplaza sobre el botón, crece horizontalmente para revelar una parte del mensaje que originalmente estaba oculto. Vamos a ver cómo funciona esto.
CSS básico
Para empezar, solo tenemos que darle a nuestro botón una forma y un color básicos. Aquí establecí la altura a 28px y el ancho a 115px, agregué algunos márgenes y relleno, y le di al botón un pequeño borde.
Fancy CSS3
Algunas personas se emocionan cuando usas demasiado CSS en un simple botón. Por esta razón, estoy separando los largos estilos CSS3 que usaré. Los estilos en esta sección son completamente opcionales y simplemente hacen que el botón se vea más moderno y fresco.
Comencé con un radio de borde básico de 15px para darnos algunas esquinas redondeadas agradables y luego agregué una ligera superposición de degradado. El gradiente comienza en transparente y se desvanece a negro. Este es un pequeño truco que utilizo para aplicar un degradado de oscurecimiento rápido que funciona con prácticamente cualquier color de fondo.
Animación CSS
Ahora es el momento de configurar nuestra transición CSS. Esto es bastante simple, lo más molesto es que, como arriba, ¡tenemos que repetirlo tantas veces! Aquí he configurado la animación para que afecte a todos los cambios, la duración a la mitad de un segundo y la función de sincronización para facilitar.
Hover CSS
Para terminar, todo lo que tenemos que hacer es agregar un estilo flotante que expanda el ancho. Medí 200px como un ancho suficiente para mostrar el texto oculto. ¡Ahora al pasar el cursor sobre el botón te ofrece una animación suave y agradable que revela un mensaje oculto!
Cambio de color simple
Esta es la más simple de todas las animaciones de botones CSS. Es tan simple que dudé en incluirlo, pero como es una opción popular, pensé en lanzarlo. Lo que sucede aquí es que tienes un color de fondo que cambia al pasar el cursor, pero utilizamos una transición como la de arriba para Cambia el color en lugar de tener el cambio sea inmediato.
CSS básico
El CSS es muy similar a la última vez con algunos cambios notables. He añadido un color de fondo diferente y he cambiado un poco la forma. También he alineado al centro el texto y he establecido la altura de línea a la altura vertical del botón para centrarlo.
Fancy CSS3
Una vez más, tenemos algunos estilos visuales completamente opcionales. He establecido un poco menos de un radio de borde para esto, apliqué un degradado de fondo similar y agregué el elemento adicional de una sombra de cuadro. Usando rgba con la sombra, lo puse en negro y luego reduje la transparencia.
Animación CSS
Podemos usar prácticamente la misma configuración de transición que usamos en el ejemplo anterior:
Hover CSS
Para terminar, simplemente aplique un color de fondo diferente al pasar el cursor. Intente elegir una variante del color ligeramente más brillante en Photoshop para que la transición se vea bien. También visite 0to255.com para obtener una excelente herramienta que lo ayuda a captar las variaciones de color.
Cambio de imagen de fondo
Este es realmente interesante y puede tener resultados dramáticamente diferentes según la selección de la imagen de fondo. Estaré usando un patrón muy sutil, por lo que el efecto será bastante sutil. Trate de usar algo más audaz para un resultado final más loco.
Aquí está lo esencial: aplica una imagen de fondo al botón, luego cambia la posición de ese fondo al pasar el mouse. Tira en una transición y obtendrás un bonito efecto de desplazamiento.
CSS básico
En su mayor parte, esto es como el ejemplo anterior. Sin embargo, observe que ahora tenemos una imagen de fondo aplicada (esto se repetirá de forma predeterminada). He puesto la posición inicial de fondo a? 0 0? solo para que puedas tener una idea de cómo esto va a funcionar. Cuando configuremos los estilos de desplazamiento más adelante, simplemente cambiaremos esta posición verticalmente.
CSS de lujo
No hay nada especial aquí que no hayamos visto, solo algunas esquinas redondeadas y una sombra.
Animación CSS
Una vez más usamos el mismo fragmento de código para nuestra animación. Esta vez aumenté la duración a 0,8 segundos para que dure un poco más.
Hover CSS
Ahora es el momento de cambiar esa posición de fondo. Recuerda que empezamos en? 0 0 ?. Ahora vamos a cambiar la imagen verticalmente estableciendo el segundo número a 150px. Si quisiéramos cambiar la posición horizontal, cambiaríamos el primer número.
Botón presionado 3D
Para nuestro último truco, estaremos imitando el diseño de un falso botón 3D que parece que se está presionando cuando pasas el ratón sobre él. Esta animación es tan simple que ni siquiera necesitaremos ninguna transición de CSS, pero el producto final sigue siendo una animación bastante buena, aunque instantánea.
CSS básico
Aquí está el CSS básico para nuestro último botón. Tenga en cuenta que tanto este como el último ejemplo utilizan sombras de texto sutiles para que el texto se destaque un poco más.
CSS de lujo
Esta vez el elegante CSS no es opcional. Si quieres lograr este efecto, al menos necesitarás la sombra y el degradado. La sombra dura es lo que le da al botón el efecto 3D falso. No es la ilusión más convincente de la historia, pero aún así es un botón de aspecto agradable.
Hover CSS
Este es nuestro mayor trozo de hover CSS todavía. Básicamente reducimos la longitud de la sombra y compensamos esa transformación con un margen. Esto da la ilusión de que se presiona el botón. Darle la vuelta al gradiente también ayuda a la ilusión.
Conclusión
Después de leer este breve tutorial, debe tener un control experto sobre cómo implementar estilos CSS3 básicos para hacer que un botón se vea bonito y atractivo. También debe tener una comprensión decente de cómo funcionan las transiciones CSS y qué se necesita para que sean compatibles con todos los navegadores. Finalmente, deberías tener algunas ideas asombrosas para crear efectos geniales.
Deja un comentario y déjame saber lo que piensas. ¿Has usado efectos similares en el pasado? ¿Cómo modificarías o mejorarías estos ejemplos?