[btn]

Generador de botones CSS

Estilos accesibles con hover y foco.

Color del botón

Estilo

Tamaño

Radio de esquinas (px)

Etiqueta

5,16 : 1

Contraste del texto

Resultado

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 10px 18px;
  font: 600 1rem/1.2 system-ui, sans-serif;
  background: #2563eb;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.05s;
}
.btn:hover {
  background: #124fd6;
}
.btn:active {
  background: #003bc1;
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Funciona por completo en tu navegador. No se envía nada a ningún sitio.

Cómo funciona

1Pega o escribe tu texto.
2Elige las opciones que necesites.
3Copia o descarga el resultado.

Sobre esta herramienta

Generador de botones CSS: Estilos accesibles con hover y foco. Pega tu texto y el resultado aparece al momento, listo para copiar o descargar. Todo ocurre en tu navegador: nada se sube ni se guarda.

¿Cómo se usa la herramienta «Generador de botones CSS»?

Pega o escribe tu texto. Elige las opciones que necesites. Copia o descarga el resultado.

¿La herramienta «Generador de botones CSS» es gratis?

Sí. Es totalmente gratuita, sin registro, sin límites de uso y sin marca de agua.

¿Se envían mis datos a un servidor?

No. Todo se calcula en tu navegador. Nada de lo que introduces se sube, registra ni guarda.

¿Funciona en el móvil?

Sí. Funciona en cualquier navegador moderno en Android, iPhone, iPad, Windows, Mac y Linux, sin apps.

Generador de botones CSS

Cómo funciona

Sobre esta herramienta

Herramientas relacionadas