Generador de botones CSS
Diseña botones y copia CSS limpio.
Define el texto, los colores, el radio, el relleno y el tamaño de fuente de un botón, prévisualízalo en vivo y copia CSS listo para usar con estado hover.
Fondo
Color del texto
Color hover
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}Cómo generar CSS de botones
- Escribe el texto del botón que quieres.
- Elige los colores de fondo, texto y hover.
- Ajusta radio, relleno y tamaño de fuente con los deslizadores.
- Copia el CSS y añade la regla hover a tu hoja de estilos.
Preguntas frecuentes
¿El CSS incluye efecto hover?
Sí. Se genera una regla :hover con el color elegido junto con el estilo base.
¿Puedo cambiar la fuente o el grosor?
La salida establece font-weight 700. Ajusta font-family y otras propiedades libremente tras pegar.
¿Se sube algún dato?
No. El generador es totalmente cliente y no almacena nada.