Widget de botón animado Elementor con efectos creativos de desplazamiento
Creative Button es un widget de complementos maestros gratuito para botones de llamada a acción con una animación flotante incorporada. Elija un efecto de la lista de efectos del botón, escriba el texto y un segundo mensaje opcional para pasar el cursor, agregue un ícono y diseñe los colores normal y flotante. El complemento gratuito incluye 6 efectos: predeterminado, Winona, Ujarak, Wayra, Tamaya y Rayen. Complementos maestros Pro suma 15 más, de Pipaluk a Shikoba, para 21 en total.
Cómo agregar un botón animado en Elementor
Necesita Elementor y el complemento gratuito Master Addons de WordPress.org.
- Compruebe que el botón creativo esté activado en Complementos maestros, widgets.
- En el editor Elementor, busque Botón creativo y arrástrelo a la página.
- Elige un efecto en Efectos de botón y coloque el botón para obtener una vista previa.
- Escriba el texto del botón, el texto del botón alternativo y la URL del enlace.
- Agregue un ícono y elija Antes o Después.
- En la pestaña Estilo, configure el relleno, el radio del borde y los diferentes colores Normal y Hover para que la animación sea fácil de ver.
Para obtener un tutorial más largo con extensiones como información sobre herramientas y animaciones de revelación, lea Cómo crear botones animados de Elementor. Cada configuración está en el Configuración del widget del botón creativo.
21 efectos flotantes: 6 gratis, 15 con Pro
Cada nombre en Efectos de botón es una animación flotante CSS diferente, como un fondo que se desliza hacia adentro, un borde que se dibuja alrededor del botón o texto que se cambia a un segundo mensaje. Default, Winona, Ujarak, Wayra, Tamaya y Rayen son gratuitos. Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite y Shikoba necesitan Pro. Pase el botón en el lienzo para obtener una vista previa de cada uno.
- Alineación de botones y alineación de texto de botones, configurados por dispositivo.
- Colores de fondo adicionales de antes y después para efectos que utilizan fondos en capas.
- La velocidad de animación está fijada por cada efecto. No hay configuración de duración de transición.
Texto de botones, texto alternativo, iconos y estilo
Establecer el Texto del botón y a Url del enlace con la pestaña nueva habitual y las opciones sin seguimiento. Todos los efectos, excepto el predeterminado, muestran un Texto de botón alternativo campo para el mensaje flotante. Agregar un Icono antes o después del texto con Icon Spacing. En Estilos de botones, establezca Ancho, Tipografía, Acolchado de botones, Borde, Radio del borde, Sombra de caja y Tamaño de ícono, luego elija texto, fondo y colores de ícono para Normal y Flover.
- “Comience” que cambia a “Es gratis” al pasar el cursor.
- Un icono de flecha después del texto para mostrar la dirección.
- Botones de píldora redondeados con un borde que cambia de color al pasar el cursor.
Botón Elementor frente al botón creativo de complementos maestros
El widget gratuito Elementor Button ya tiene animaciones flotantes. Aquí es donde encaja cada uno.
| Característica | Botón Elementor | Botón creativo de complementos maestros |
|---|---|---|
| Precio | Gratis en Elementor | 6 efectos gratis, 21 con Pro |
| Animación flotante | Lista de animación Elementor Hover, como Grow, Pulse, Bob y Wobble | Efectos CSS con nombre con fondos deslizantes, bordes y colores en capas |
| Intercambio de texto al pasar el cursor | No | Texto de botón alternativo |
| Antecedentes | Clásico o degradado para Normal y Hover | Colores sólidos, además de colores Antes y Después en algunos efectos |
| Velocidad de transición | Configuración de duración de la transición | Fijado por cada efecto |
| Icono | Antes o después, con espaciado | Antes o después, con espaciado, tamaño y color flotante |
Utilice el botón Elementor para gradientes, una velocidad de transición personalizada o un simple crecimiento o pulso. Utilice el botón creativo cuando desee un barrido de fondo o un intercambio de texto sin CSS personalizado. Para enlaces de texto animados, consulte Enlaces creativos.
Preguntas frecuentes sobre Creative Button
¿el widget del botón creativo es gratuito?
Sí. El widget y 6 efectos (predeterminado, Winona, Ujarak, Wayra, Tamaya y Rayen) son gratuitos. Los otros 15 efectos necesitan Complementos maestros Pro.
¿Puedo usarlo como botón de envío de formulario?
No. El botón creativo es un enlace, no un botón de formulario. Para diseñar un botón de envío, utilice el widget de formulario para su complemento, como el Formulario de contacto 7 o Formularios WPF widget.
¿funcionan los efectos flotantes en los teléfonos?
Las pantallas táctiles no flotan, por lo que la mayoría de los visitantes de los teléfonos ven el estado normal y van directamente al enlace. Asegúrese de que los colores y el texto normales funcionen por sí solos.
¿puedo cambiar la velocidad de la animación flotante?
No en el panel. Cada efecto tiene su propia sincronización. Puede cambiarlo con CSS personalizado en el botón o usar el widget Elementor Button, que tiene una configuración de duración de transición.
¿en qué se diferencia esto de la animación flotante del botón Elementor?
El botón Elementor mueve todo el botón, por ejemplo crecer o pulsar. Los efectos del botón creativo animan el interior del botón, como un fondo que se desliza hacia adentro o el texto que cambia a su texto de botón alternativo.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
