Generador de Botones CSS
Genera botones CSS estilizados al instante. Elige entre flat, outlined, gradient, shadow y ghost — copia el CSS y HTML en un clic.
① Escribe el texto del botón ② Elige estilo y forma ③ Copia CSS y HTML
Estilo
Forma
Color principal
#C9B89A
Cómo funciona
Cada estilo usa CSS puro sin JavaScript. Flat y gradient usan fondos rellenos; outlined y ghost usan fondos transparentes con bordes; shadow agrega un box-shadow coloreado que coincide con el color del botón.
Opciones de forma
Cuadrado usa border-radius 4px para esquinas nítidas. Redondeado usa 8px para un aspecto moderno. Pill usa 9999px para crear una forma de cápsula completamente redondeada.
Estados hover
El CSS generado incluye estilos hover usando opacity: 0.85 o filter: brightness() para que solo necesites una variable de color para los estados predeterminado y hover.
.btn {
padding: 0.6em 1.4em;
cursor: pointer;
font-size: 15px;
font-family: inherit;
border-radius: 8px;
transition: all 0.2s;
background: #c9b89a;
color: #fff;
border: none;
}
.btn:hover {
opacity: 0.85;
}
Salida HTML<button class="btn">Click me</button>
¿Qué es un generador de botones CSS?
Un generador de botones CSS es una herramienta que produce una clase CSS .btn lista para usar y el markup HTML correspondiente para componentes de botones estilizados. El diseño moderno de botones involucra elecciones cuidadosas de background, border-radius, font-size y estados hover interactivos. Patrones comunes: flat (relleno sólido), outlined (transparente con borde), gradient, shadow (brillo box-shadow) y ghost (relleno semi-transparente).
Preguntas frecuentes
Un botón flat usa un solo color de fondo sólido sin degradados ni sombras. Un botón gradient usa un linear-gradient del color principal a un tono más oscuro del mismo color.
El estilo outlined usa un fondo transparente con un borde de color (2px solid) y texto de color. Al pasar el cursor, el botón generalmente gana un fondo sutil. Funciona bien como botón de acción secundaria.
Un botón ghost usa un fondo muy ligeramente tintado (color con 13% de alpha) y un borde semi-transparente (44% de alpha). Crea una apariencia mínima adecuada para acciones terciarias.
El tono más oscuro se calcula convirtiendo el color hex a HSL y reduciendo la luminosidad en un 20%.
Los botones generados incluyen contraste suficiente. Para accesibilidad completa, agrega atributos aria-label y asegúrate de que los estilos de foco sean visibles en tu hoja de estilos.
El CSS generado incluye estados hover. Para agregar focus y active, añade :focus { outline: 2px solid {color}; outline-offset: 2px; } y :active { transform: scale(0.97); } al ruleset .btn.
Sí. Usa nombres de clase diferentes (ej. .btn-primary, .btn-outlined) y genera CSS separado para cada uno.