¡Mejora tu sitio web con botones dinámicos que captan la atención e impulsan la acción!
-
Características principales:
-
Animaciones llamativas para fomentar la interacción del usuario
-
Ideal para llamadas a la acción, promociones, registros y navegación 🛒
-
1. Comienza con una plantilla:
-
🔹 Botón con efecto de brillo: Resaltado pulsante para atraer la atención
-
🔹 Botón con efecto de deslizamiento al pasar el cursor: El color de fondo se desliza al pasar el cursor
-
🔹 Botón con rebote: Rebote sutil para un efecto divertido
-
🔹 Botón de contorno a relleno: Transición de contorno a relleno
-
🔹 Botón con flecha desplegable: El icono de flecha se desliza al pasar el cursor
-
Acciones:
-
Previsualiza cada estilo
-
Selecciona el que prefieras
-
Haz clic en Continuar para personalizar
-
2. Utilice las pestañas de edición:
-
Contenido: Establezca el texto del botón, el enlace y el icono.
-
Estilo: Personalice los colores, las fuentes, los tamaños, los bordes y los efectos al pasar el cursor.
-
Ajustes: Ajuste la velocidad de la animación, los activadores y los comportamientos avanzados.
-
3. Personaliza tu botón:
-
Pestaña de contenido:
-
Texto: Crea tu llamada a la acción (por ejemplo, “Comprar ahora”)
-
Enlace: Dirige a una página, URL o ventana emergente
-
Iconos: Añade gráficos opcionales (por ejemplo, carrito, flecha)
-
Alineación: Elige la posición del botón
-
Pestaña de estilo:
-
Fuente y tamaño: Mejora la legibilidad
-
Colores: Configura los estados normal y al pasar el cursor
-
Opciones de borde: Selecciona bordes redondeados o rectos
-
Efectos de sombra: Mejora la visibilidad
-
Estilos al pasar el cursor: Elige efectos como brillo, deslizamiento o volteo
-
Pestaña de configuración:
-
Velocidad de animación: Controla la velocidad del efecto
-
Opciones de activación: Decide cuándo se reproducen las animaciones
-
Bucle: Configura las animaciones para que se repitan o se activen una sola vez
-
Comportamiento en móviles: Optimiza para dispositivos táctiles 📱
-
Consejos útiles:
-
Mantén el texto conciso y orientado a la acción (por ejemplo, “Más información”)
-
Utiliza colores que coincidan con tu marca para lograr coherencia 🎨
-
Limita las animaciones a los botones de llamada a la acción principales para mayor claridad.
-
Experimenta con animaciones para encontrar las que mejor convierten.
-
Asegura un diseño optimizado para móviles para una fácil accesibilidad. 🌟
