Botones Animados CSS

Texto del Botón

Nombre de Clase

Principal

Fondo

¡Código CSS Copiado!

Guía de Integración

Cómo aplicar estos efectos en tu constructor favorito

Concepto General

Para usar estos efectos, necesitas hacer dos cosas en cualquier sitio web:
1. Copiar el CSS generado aquí y pegarlo en tu archivo de estilos o sección de "CSS Personalizado".
2. Asignar la Clase CSS (ej: mi-btn) a tu elemento botón.

Elementor

Selecciona tu widget de Botón.
Ve a la pestaña Avanzado → Clases CSS.
Escribe el nombre de tu clase (sin el punto). Ej: mi-btn.
Ve a Ajustes del Sitio (o Ajustes de Página) → CSS Personalizado.
Pega el código CSS que copiaste de esta app.

Divi Builder

Abre la configuración del Módulo Botón.
Ve a la pestaña Avanzado → ID y Clases CSS.
En Clase CSS, escribe el nombre (sin punto). Ej: mi-btn.
Guarda y ve a Opciones del Tema Divi → pestaña General.
Baja hasta el cuadro CSS Personalizado y pega el código allí.

Bricks Builder

Haz clic en tu elemento Botón.
En el panel izquierdo, campo CSS Classes, escribe tu clase (sin punto).
Haz clic en el icono de Configuración (Settings) arriba a la izquierda → Page Settings.
Ve a Custom CSS y pega el código.

Oxygen

Selecciona el elemento Botón.
Arriba a la izquierda, en el selector de ID, haz clic para Add Class.
Escribe el nombre (ej: mi-btn) y añádelo.
Ve al menú Manage → Stylesheets.
Agrega una nueva hoja o edita una existente y pega el código CSS.

Nota sobre conflictos

Algunos constructores fuerzan sus propios estilos (como color de fondo o bordes). Si el efecto no se ve exactamente igual, añade !important a las propiedades en el CSS generado, o asegúrate de quitar los estilos predeterminados en el panel de diseño del constructor.