Botón Moderno con Gradiente
Un botón elegante y moderno con fondo degradado, efectos hover y transiciones suaves, perfecto para elementos de llamada a la acción.
Diseño Responsivo
Sí
Soporte para Modo Oscuro
Sí
líneas
53
Compatibilidad del Navegador
Chrome · Firefox · Safari · Edge
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Botón Moderno con Gradiente
Este componente de botón moderno presenta un hermoso fondo degradado con animaciones suaves al pasar el cursor y un efecto de brillo deslizante. Perfecto para botones de llamada a la acción, envío de formularios o cualquier elemento interactivo que necesite destacar.
Características
- Fondo Degradado: Gradiente llamativo de azul a púrpura
- Efectos Hover: Animación sutil de elevación con sombra mejorada
- Animación de Brillo: Efecto de brillo deslizante al pasar el cursor
- Animación de Icono: El icono de flecha se desliza al pasar el cursor
- Responsivo: Funciona perfectamente en todos los tamaños de pantalla
- Accesible: Estados de enfoque apropiados y marcado semántico
Uso
Simplemente agrega la estructura HTML y los estilos CSS para crear este botón moderno. El componente es independiente y no requiere JavaScript.
Personalización
Puedes personalizar fácilmente:
- Colores: Cambia los colores del gradiente en la propiedad
background - Tamaño: Ajusta
paddingyfont-sizepara diferentes tamaños de botón - Radio del Borde: Modifica
border-radiuspara diferentes estilos de esquinas - Velocidad de Animación: Cambia la duración de
transitionpara efectos más rápidos/lentos
Compatibilidad del Navegador
Este componente utiliza características CSS modernas como gradientes y transformaciones, compatibles con todos los navegadores modernos. Se degrada elegantemente en navegadores más antiguos.
HTML
4
líneas
CSS
49
líneas
<button class="modern-btn">
<span class="btn-text">Comenzar</span>
<span class="btn-icon">→</span>
</button>
Compatibilidad del Navegador
Chrome
≥ 26
Firefox
≥ 16
Safari
≥ 7
Edge
≥ 12