Diseñador de botones

Diseña un botón completo (colores, borde, radio, sombra, tipografía y estados) y copia el HTML, el CSS, el archivo completo o las clases de Tailwind.

¿Qué hace a un buen botón?

Un botón es probablemente el elemento más importante de una interfaz: es donde el usuario actúa (comprar, enviar, registrarse). En CSS se construye combinando propiedades que ya conoces:

• padding — el espacio interno. Un botón cómodo mide al menos 44 px de alto para tocarlo con el dedo.
• background y color — fondo y texto, con suficiente contraste.
• border y border-radius — el contorno y lo redondeado de las esquinas.
• box-shadow — profundidad y jerarquía.
• Pseudo-clases de estado:
  • :hover — cuando el ratón pasa por encima.
  • :active — mientras se mantiene pulsado.
  • :focus-visible — cuando se llega con el teclado (Tab). ¡No lo elimines!
• transition — suaviza el cambio entre estados.

.boton {
  padding: 12px 24px;
  border: 0;
  border-radius: 10px;
  background-color: #7c3aed;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.boton:hover {
  background-color: #6d28d9;
  transform: translateY(-2px);
}

Generador

Elige un preset y ajústalo. Pasa el ratón sobre el botón, haz clic y navega con Tab para ver los estados reales.

Diseñador de botones

Contenido

Texto

Etiqueta buttona (enlace)Icono NingunoFlechaDescargaMás (+)Emoji

Posición IzquierdaDerecha

Colores

Fondo

Texto

Tamaño y forma

Padding XpxPadding Ypx

Radiopx Píldora (radio completo)Bordepx

Sombra

Desplazamiento YpxDesenfoquepx

Color sombraOpacidad

Desenfoque 0 con desplazamiento crea el estilo 3D (el botón se hunde al pulsarlo).

Tipografía

Fuente Sistema (sans-serif)HumanistaRedondeadaSerifMonoespaciada

TamañopxPeso 400500600700800

Espaciado letrasem MAYÚSCULAS

Hover, active y focus

Fondo hoverTexto hover

ElevaciónpxEscala

Sombra más grande al pasar el ratónTransiciónsAnillo de foco (teclado)

<button type="button" class="boton">
  Comenzar ahora
  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>

Consejos de uso

• Usa button para acciones y a para navegar. Si al hacer clic cambias de página, es un enlace; si envías un formulario o abres un modal, es un botón.
• Define jerarquía: un botón primario (relleno, llamativo) por sección y botones secundarios en estilo outline o ghost.
• Verifica el contraste del texto con el fondo (mínimo 4.5:1). Puedes revisarlo en el generador de paletas.
• Mantén las transiciones cortas (150–250 ms). Un botón que tarda en reaccionar se siente lento.
• Si el botón sólo tiene un icono, añade aria-label="Descripción" para lectores de pantalla.
• Guarda tus estilos como clases reutilizables (.boton, .boton--outline) en lugar de repetir CSS en cada botón.

Buena práctica

Combina el botón con variables CSS para cambiar el tema de todo el sitio en un solo lugar:

:root {
  --color-primario: #7c3aed;
}

.boton { background-color: var(--color-primario); }

Error común

outline: none en botones sin un estilo :focus-visible alternativo deja a quienes navegan con teclado sin saber dónde están. El código generado incluye un anillo de foco visible.