Generador de botones CSS
Ajusta el aspecto de un botón y obtén el CSS completo con estado hover y foco sin escribir propiedades a mano.
Espacio de trabajo · Generador de botones CSS
Vista previa
CSS generado
.btn-custom {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #17191c;
color: #ffffff;
border: 0px solid #17191c;
border-radius: 999px;
padding: 14px 24px;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
width: auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
transition: background-color .2s ease, transform .2s ease;
}
.btn-custom:hover {
background-color: #2c2f34;
}
.btn-custom:active {
transform: scale(0.98);
}
.btn-custom:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}Cómo se usa
Cambia el texto y los colores de fondo, texto y hover.
Ajusta el radio, el padding, el tamaño de letra, el borde y la sombra.
Revisa la vista previa y copia el CSS generado en tu hoja de estilos.
Ejemplos
Botón principal
Fondo oscuro, texto blanco, radio de 999 px y sombra suave.
Botón secundario
Fondo transparente, borde de 1 px y mismo radio.
Botón de ancho completo
Activa el ancho completo para formularios y móviles.
Lo que conviene saber
El CSS generado incluye display, alineación, transición, hover, active y focus-visible. Puedes copiarlo tal cual o adaptar los nombres de clase a tu proyecto.
Los colores se validan antes de aplicarse. Si un valor no es un color CSS reconocible, se usa el valor por defecto para que la vista previa no se rompa.
Preguntas frecuentes
Herramientas relacionadas
Otras herramientas que pueden servirte para tareas similares.
Generador de border-radius
Ajusta las cuatro esquinas por separado y copia el CSS con vista previa.
Generador de sombras CSS
Crea sombras de caja suaves y copia la propiedad box-shadow.
Generador de degradados CSS
Diseña degradados lineales o radiales y copia el CSS.
