Guía del Generador de Botones CSS
Los botones son el elemento más clicado de cualquier página: llevan cada registro, compra y descarga. El generador ofrece 6 estilos (degradado, contorno, 3D, píldora, resplandor, brillo), cada uno con hover real, más color, radio y relleno personalizados.
Elige un estilo, ajusta el color y los deslizadores, y copia el CSS listo para usar. Pégalo en un bloque <style>, añade class="btn" a tu botón y el efecto hover llega automáticamente.
Pro Tips
- Alinea el color del botón con el acento de tu CTA y mantén un contraste de texto de al menos 4.5:1 (WCAG AA).
- Añade siempre un estado hover visible: una pequeña elevación o sombra confirma que el botón es clicable y mejora la conversión.
Frequently Asked Questions
Q: ¿Cómo añado el botón a mi sitio?
¿Cómo añado el botón a mi sitio? Copia el CSS generado en un bloque <style> y usa <button class="btn">Etiqueta</button> en tu HTML.
Q: ¿Por qué mi botón con degradado se ve de color sólido?
¿Por qué mi botón con degradado se ve de color sólido? Los degradados necesitan color inicial y final: comprueba que ambos selectores estén configurados y que background no esté siendo anulado por otra regla.
Q: ¿Puedo cambiar el efecto hover?
¿Puedo cambiar el efecto hover? Sí, el bloque .btn:hover es independiente. Edita o elimina libremente sus líneas de transform, sombra o fondo.
Q: ¿Son accesibles estos botones?
¿Son accesibles estos botones? Sí. Usa contraste legible y añade :focus-visible { outline: 2px solid; outline-offset: 2px; } para que los usuarios de teclado vean el foco.
Q: ¿Puedo usarlos en proyectos comerciales?
¿Puedo usarlos en proyectos comerciales? Por supuesto: el CSS generado es original y gratuito para trabajos personales y de clientes.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.