Generador de botones CSS

Personalice un botón (colores, esquinas redondeadas, sombra, texto) y vea el resultado en directo antes de copiar el código CSS completo, listo para pegar en su proyecto. Generación 100% local en su navegador.

Texto del botón

Color de fondo

Color del texto

Radio de las esquinas: 8px

Tamaño del texto: 16px

Padding vertical: 12px

Padding horizontal: 24px

Sombra Texto en negrita

Código CSS

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

Cómo funciona

Un botón bien diseñado debe identificarse de inmediato como pulsable, con un contraste suficiente entre el texto y el fondo y un efecto al pasar el ratón que confirme la interactividad. Ajuste cada parámetro (colores, radio de las esquinas, sombra, tamaño) y observe el resultado en directo en la vista previa; después copie el código CSS completo, que incluye automáticamente un estado :hover con un tono más oscuro y un ligero efecto de elevación.

¿Cómo se calcula el color al pasar el ratón?

El color al pasar el ratón se genera automáticamente oscureciendo el color de fondo elegido, para garantizar un contraste visible al pasar el cursor sin tener que elegir un segundo color manualmente.

¿El CSS generado es compatible con todos los frameworks?

Sí, es CSS estándar sin dependencia de ningún framework concreto: puede pegarlo en una hoja de estilos clásica, adaptarlo como clase utilitaria o convertirlo manualmente a estilo Tailwind o a styled-components si su proyecto los utiliza.

El resultado y el código se generan en tiempo real en su navegador, sin ninguna petición a un servidor.