Déjame probar mis poderes psíquicos por un segundo.
Apuesto a que la última vez que creó un efecto de desplazamiento CSS para un botón en su sitio, invirtió el color del texto con el color del fondo y usó una transición de entre 0,3 y 0,5 segundos.
¿Tengo razón? ¿Te sientes visto?
O tal vez buscó un poco en Google y encontró una lista de animaciones CSS geniales para agregar a su sitio web y eligió un par de ellas, ¿verdad?
Incluso si no, ¿estaría de acuerdo en que esta es la forma más común de crear animaciones CSS para botones? No lo estoy golpeando, lo he hecho muchas veces yo mismo. Funciona.
Pero… hay muchas otras formas en las que puedes animar tus botones con CSS, lo que podría hacer que tu sitio sea más divertido y ayudarlo a destacar entre la multitud.
¡Así que exploremos otras opciones!
Efectos de gradiente de botón CSS
En el momento en que escribo esto, no puedes animar gradientes con CSS, al menos no directamente. Sin embargo, hay una manera de engañar a CSS para que haga lo que queremos: simplemente hacemos que el fondo sea más grande que el botón y movemos el fondo al pasar el mouse. El resultado es un efecto degradado animado en sus botones.
Aquí hay algunos ejemplos: puede tomar uno de estos y cambiar los colores y el ángulo del degradado si lo desea:
También puede crear un efecto degradado animado alrededor del borde, en lugar del fondo. O ambos:
Efectos de desplazamiento del botón CSS usando la sombra del cuadro
¿Recuerdas cuando eras niño y dibujaste un rectángulo, luego agregaste un poco de sombra alrededor de dos bordes para que pareciera un poco 3D? Bueno, CSS box-shadow hace eso:
Pero, box-shadow nos da mucho control sobre cómo aparece la sombra:
- ¿Qué tan grande debe ser la sombra?
- ¿Qué tan lejos de la caja?
- ¿Que color?
- ¿Múltiples sombras, o solo una?
- ¿Dentro de la caja o fuera?
- ¿Sombra sólida o borrosa?
¡Y podemos animar todo esto! Aquí hay algunas ideas creativas sobre cómo puede usar la sombra de cuadro en los efectos de desplazamiento del botón:
Consulte el artículo de Mozilla sobre sombra de la caja aprender más.
Expansión del efecto de desplazamiento del botón CSS
Aquí hay un efecto de desplazamiento único que podría serle útil:
Parece un enlace de texto con un pequeño ícono al lado, pero las apariencias pueden ser engañosas: todo es en realidad el botón. Cuando se desplaza, el ícono se expande y se extiende sobre el texto. ¡Muy lindo!
Botón CSS en efectos de relleno de desplazamiento
Como dije antes, el efecto de desplazamiento de botón más común tiene que ser un relleno simple: simplemente cambiar el color de fondo y el color del texto, generalmente con un fundido de entrada de medio segundo más o menos. Para ser justos, hay una razón por la que esto es común: hace el trabajo y lo hace bien. Pero eso no significa que no puedas ser creativo con él.
Hay muchas maneras de crear el efecto de relleno además de un desvanecimiento. Puede hacer que el fondo se extienda desde el centro, deslizarlo hacia adentro desde un lado o girarlo y bloquearlo en su lugar, solo por nombrar tres. Aquí hay algunas maneras en que podría mezclarlo un poco:
Efecto de botón giratorio 3D al pasar el mouse solo con CSS
Es posible que hayas visto estos botones giratorios en 3D antes. Este es particularmente genial porque está hecho puramente en CSS y porque tiene dos “cubos” que giran en diferentes direcciones (aunque podrías deshacerte del segundo si no lo quieres).
Así es como se ve:
Tenga en cuenta que deberá cambiar el atributo de datos y el texto dentro del lapso para cambiar el texto que se muestra.
Efecto de deslizamiento estilo Apple al pasar el mouse
Estos botones imitan visualmente el efecto en iOS cuando desliza un elemento del menú (por ejemplo, una nota en su aplicación Notas) para que aparezcan los botones. Sin embargo, aquí es solo un efecto visual: no tiene que hacer clic en el bit verde que se desliza hacia adentro, puede hacer clic en cualquier parte:
Lo bueno de esto es que puedes darle al visitante un llamado a la acción adicional (aunque personalmente, hubiera usado rojo en lugar de verde para el botón de cancelar).
Cambio de fondo de desplazamiento del botón CSS
OK, es hora de pensar fuera de la caja.
Lo digo literalmente: ¿por qué no hacer que el efecto de desplazamiento de nuestro botón CSS cambie algo más que el botón en sí? ¿Como el fondo, tal vez?
Esta es una de esas ideas geniales que es bueno tener en el bolsillo trasero para uso futuro.
Efecto de botón CSS de puerta oculta
¡Oh! mira, un icono de Twitter. Supongo que simplemente hago clic aquí y me lleva a la página de Twitter del usuario. Como los 10 trillones de otros botones de Twitter que he visto en mi vida.
Oh, bueno, también podría hacer clic en él:
¡Guau! ¿Es un botón de Twitter o la entrada a una bahía de transbordadores en Starship Enterprise?
Aunque hay algo de JS en el Pen, eso es solo para importar el enlace de Twitter, en este caso al creador. Tim HolmanEnlace de Twitter. El JS no tiene ningún efecto sobre cómo funciona el botón y, por supuesto, no tiene que usarlo para Twitter, puede adaptarlo para cualquier cosa.
Botón CSS de Pac-Man animado al pasar el mouse
Aquí hay un increíble trabajo de Darío Corsi. Échale un vistazo:
Hay mucho que apreciar de esto:
- Es CSS puro, no una imagen o una línea de conocimiento de JS
- De todos los fantasmas, Darío eligió parpadeoel líder de los fantasmas y archienemigo de Pac-Man
- ¡Los ojos de Blinky miran en la dirección en la que se mueve!
- La animación se detiene en el lugar cuando deja de flotar, en lugar de restablecerse al principio
¡Buena cosa!
Una verdadera animación de botón 3D usando three.js
Este no es CSS puro, pero pensé en incluirlo para mostrarle el tipo de cosas que son posibles cuando se incluye JS en la imagen. Este es un botón de efecto de desplazamiento 3D “verdadero” por petirrojo delaporte:
¡Mira eso! Si mueve el mouse alrededor del área del botón, las formas reaccionan a los movimientos del mouse.
Ahora, cuando digo 3D “verdadero”, obviamente no es realmente 3D ya que es una imagen plana en su pantalla. Solo quiero decir que hay un eje Z involucrado. Estos no son simplemente objetos 2D a diferentes profundidades, moviéndose a diferentes velocidades (como es el caso del paralaje). El ángulo y la posición del objeto a lo largo del eje Z se calculan en JS. Esto significa que puede moverlo o girarlo a lo largo de la tercera dimensión y agregar efectos de iluminación para que realmente cobre vida.
Para ello, Robin ha utilizado una biblioteca JS llamada tres.js – una biblioteca muy popular para hacer animaciones 3D en la web, y en realidad es bastante fácil comenzar. Por supuesto, necesitará algo de práctica para crear algo como esto, pero si realmente lo estudia, puede hacer cosas increíbles.
Su navegador no soporta la etiqueta de vídeo.
Hablando de bibliotecas JS fáciles de usar que te ayudan a hacer cosas geniales, también te puede gustar fullPage.js. fullPage lo ayuda a crear magníficos sitios de una página de forma rápida y sencilla, y funciona de maravilla junto con WordPress, React y Vue.
Hemos estado hablando mucho sobre el uso de animaciones para mejorar el atractivo visual de su sitio en esta publicación, y si le gusta este tipo de cosas, eche un vistazo a los efectos que puede usar con fullPage. Puede usar diferentes efectos a medida que se desplaza de una página de pantalla completa a la siguiente (el efecto de la tarjeta es bastante elegante, por ejemplo), o en los controles deslizantes. Todo esto está integrado y funciona fuera de la caja.
Y, por supuesto, puede integrar todos los increíbles efectos de desplazamiento del botón CSS que acabamos de ver en su sitio fullPage.js. De hecho, el botón de cambio de imagen de fondo podría funcionar muy bien en un sitio de página completa. ¡Pruebe fullPage.js y vea qué se le ocurre!
Artículos relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
