Saltar al contenido

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.

Funciona en tu navegador. No guardamos ni enviamos lo que escribes.Gratis · Sin registro previo

Espacio de trabajo · Generador de botones CSS

Funciona en tu navegador · 100% local

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;
}
Los cálculos se hacen en tu navegador. No se envían datos.
Instrucciones

Cómo se usa

01

Cambia el texto y los colores de fondo, texto y hover.

02

Ajusta el radio, el padding, el tamaño de letra, el borde y la sombra.

03

Revisa la vista previa y copia el CSS generado en tu hoja de estilos.

Casos reales

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.

Guía de referencia

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.

Dudas habituales

Preguntas frecuentes

Sí, pero la vista previa solo interpreta colores directos. Para producción puedes sustituir los valores por tus variables.

Herramientas relacionadas

Otras herramientas que pueden servirte para tareas similares.

Más en Desarrollo web→