Botones ghost en CSS: código y accesibilidad (2026)

Los botones ghost (también llamados outline buttons o transparent buttons) son botones con borde y fondo transparente que se han convertido en uno de los patrones UI más usados en 2026. Aportan minimalismo, no compiten visualmente con elementos primarios y funcionan perfecto para acciones secundarias. En este post tienes el CSS completo para crear botones ghost responsive, accesibles y modernos.

Botón ghost básico en CSS

.btn-ghost {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #2E5AAC;
  border: 2px solid #2E5AAC;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-ghost:hover {
  background: #2E5AAC;
  color: #fff;
}

.btn-ghost:focus-visible {
  outline: 3px solid rgba(46, 90, 172, 0.4);
  outline-offset: 2px;
}

Tres principios clave: fondo transparente, borde 2px del color de marca, transition suave en hover. Los botones ghost necesitan más padding que los solid para mantener el área táctil mínima de 44×44px (WCAG).

Estados del botón

.btn-ghost:hover {
  background: #2E5AAC;
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: translateY(0);
  opacity: 0.9;
}

.btn-ghost:disabled {
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .btn-ghost {
    transition: none;
    transform: none !important;
  }
}

El prefers-reduced-motion es obligatorio en 2026: respeta usuarios con vestibular disorders que desactivan animaciones desde el sistema operativo.

Variantes modernas

/* Ghost con flecha animada */
.btn-ghost-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-ghost-arrow::after {
  content: "→";
  transition: transform 0.2s ease;
}
.btn-ghost-arrow:hover::after {
  transform: translateX(4px);
}

/* Ghost con sombra al hover */
.btn-ghost-shadow:hover {
  background: #2E5AAC;
  color: #fff;
  box-shadow: 0 8px 16px rgba(46, 90, 172, 0.3);
}

/* Ghost dual color */
.btn-ghost-dual {
  border: 2px solid;
  background: transparent;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(135deg, #2E5AAC, #00bfff);
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

Accesibilidad WCAG

• Contraste 4.5:1 mínimo entre borde+texto y fondo. WebAIM Contrast Checker para validar.
• Área táctil 44×44px mínimo (WCAG 2.5.5). Padding generoso lo asegura.
• :focus-visible con outline claro (no quitar el outline).
• aria-label si el botón solo lleva icono sin texto.
• prefers-reduced-motion para usuarios con sensibilidad al movimiento.

Preguntas frecuentes

¿Cuándo usar botón ghost vs sólido?

Sólido para acción principal (CTA primario). Ghost para acción secundaria. NO uses dos sólidos juntos: compiten visualmente. Patrón típico: sólido «Comprar» + ghost «Saber más».

¿Es accesible un botón ghost sobre fondo de imagen?

Solo si garantizas contraste 4.5:1 con la zona de la imagen donde está el botón. Si la imagen varía, añade fondo semi-transparente al botón (rgba con opacidad 80-90%) para legibilidad garantizada.

Conclusión

Botón ghost = minimalismo + accesibilidad. Copia el CSS del listado, ajusta colores a tu marca y respeta accesibilidad WCAG. Disfrútalos!

---

• Sección CSS
• Botones PSD para web