Botón ghost en CSS: código, variantes y accesibilidad (2026)

Un botón ghost (también llamado ghost button u outline button) es un botón con fondo transparente y borde visible. Es uno de los patrones de UI más usados en 2026 porque aporta minimalismo sin competir visualmente con el botón principal de la página. Aquí tienes el CSS completo: botón básico y seis variantes modernas. Incluye también las reglas de accesibilidad para no fallar en contraste ni en área táctil.

Botón ghost básico en CSS

Tres reglas fijan un botón ghost correcto: fondo transparente, borde de 2px con el color de marca y una transición suave en hover. Dale más padding que a un botón sólido: al no tener relleno de color, necesita área para no parecer un enlace de texto suelto. Ese padding también te ayuda a cumplir el mínimo táctil de 44×44px que pide WCAG.

CSS del botón base:

.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: background 0.2s ease, color 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;
}

Cambia #2E5AAC por el color de tu marca. Comprueba el contraste antes de darlo por bueno — en el apartado de accesibilidad tienes cómo hacerlo.

Estados del botón: hover, focus, active y disabled

Un botón ghost sin estados bien definidos parece roto: el usuario no sabe si está pulsando algo interactivo. Estos cuatro estados cubren todo el ciclo de uso, incluida la versión reducida para quien desactiva animaciones:

.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;
  pointer-events: none;
}
 
@media (prefers-reduced-motion: reduce) {
  .btn-ghost {
    transition: none;
  }
  .btn-ghost:hover,
  .btn-ghost:active {
    transform: none;
  }
}

El bloque prefers-reduced-motion ya no es opcional en 2026: respeta a quien desactiva animaciones desde el sistema operativo, algo habitual en personas con trastornos vestibulares. Fíjate en que el estado disabled añade pointer-events: none. Sin eso, el botón sigue reaccionando visualmente al cursor aunque esté deshabilitado — un fallo común que pasa desapercibido en pruebas rápidas.

6 variantes modernas de botón ghost

El botón ghost básico funciona, pero estas seis variantes cubren los casos que más se piden en 2026: icono, movimiento sutil y efectos de borde. Dan sensación de producto cuidado sin salir del minimalismo.

1. Ghost con icono

Si el botón solo lleva un icono (sin texto visible), necesita aria-label obligatorio — lo ves en el apartado de accesibilidad. Con texto + icono, el icono es decorativo y no hace falta etiquetarlo aparte.

.btn-ghost-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
 
.btn-ghost-icon svg {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  fill: none;
}
 
.btn-ghost-icon:hover svg {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

2. 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);
}

3. Ghost con borde animado

En vez de rellenar el fondo, el borde «se dibuja» al hacer hover. Usa background-size sobre un gradiente lineal repetido para simular el trazo:

.btn-ghost-border-draw {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(#2E5AAC, #2E5AAC) border-box;
  background-size: 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
 
.btn-ghost-border-draw:hover {
  background:
    linear-gradient(#2E5AAC, #2E5AAC) padding-box,
    linear-gradient(#2E5AAC, #2E5AAC) border-box;
  color: #fff;
}

4. Ghost con relleno progresivo

El fondo entra desde un lado en vez de aparecer de golpe. Es el efecto que más se ve en landing pages de producto en 2026:

.btn-ghost-fill {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
 
.btn-ghost-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2E5AAC;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
 
.btn-ghost-fill:hover {
  color: #fff;
}
 
.btn-ghost-fill:hover::before {
  transform: scaleX(1);
}

5. Ghost con sombra al hover

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

6. Ghost dual color (borde degradado)

.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 a fondo

El botón ghost es el tipo de componente que más falla en accesibilidad. Su propio diseño — fondo transparente, borde fino — juega en contra del contraste. Estos cinco puntos cubren lo que pide WCAG 2.1 nivel AA:

• Contraste 4.5:1 mínimo entre el texto/borde y el fondo. Verifícalo con el Contrast Checker de WebAIM antes de dar el color por bueno.
• Área táctil de 44×44px mínimo (criterio WCAG 2.5.5). El padding generoso del botón base ya lo garantiza; no lo reduzcas en mobile.
• :focus-visible con outline visible. Nunca uses outline: none sin sustituirlo por otra marca de foco igual de clara — es la forma en que alguien que navega con teclado sabe dónde está.
• aria-label en botones solo-icono. Si el botón no lleva texto visible, un lector de pantalla necesita aria-label="Descarga el recurso" o similar para anunciar qué hace.
• prefers-reduced-motion respetado en cualquier variante animada (flecha, borde, relleno) — ya lo viste en el apartado de estados.

Botón ghost sobre fondo de imagen

Es la pregunta que más me llega sobre este componente: un botón ghost encima de una foto pierde contraste en cuanto la imagen tiene zonas claras. Pasa igual en un hero con imagen de fondo. La solución no es forzar un color fijo que puede fallar según la imagen. Es darle al botón un fondo semitransparente que garantice el contraste pase lo que pase:

.btn-ghost-on-image {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #2E5AAC;
  color: #2E5AAC;
  backdrop-filter: blur(2px);
}

Con un fondo al 85-90% de opacidad, el contraste ya no depende de qué haya detrás. Si tu marca exige mantener el ghost 100% transparente incluso sobre imagen, la alternativa es añadir un degradado oscuro solo en la zona del botón, con un ::before y background: linear-gradient(). Es más trabajo, pero mantiene el efecto visual sin perder contraste.

Compatibilidad con navegadores

El botón básico y los estados funcionan en cualquier navegador moderno sin prefijos. Dos matices honestos. El primero: :focus-visible no existe en navegadores muy antiguos, aunque Safari ya lo soporta desde 2021, así que en 2026 ya no es un problema real salvo tráfico residual con versiones sin actualizar. El segundo: la variante de borde animado con background-clip: padding-box, border-box puede verse ligeramente distinta entre Chrome y Firefox en el grosor exacto del degradado — pruébala en tu navegador objetivo antes de darla por cerrada.

Preguntas frecuentes

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

Sólido para la acción principal (el CTA que quieres que se pulse). Ghost para la acción secundaria. No pongas dos botones sólidos juntos: compiten por la atención. El patrón que mejor funciona es sólido «Comprar» + ghost «Saber más».

¿Es accesible un botón ghost sobre una foto?

Solo si garantizas 4.5:1 de contraste en la zona exacta donde cae el botón. Si la imagen cambia — carrusel, distintos breakpoints — añade un fondo semitransparente al botón, como en el ejemplo de arriba. Es la forma más simple de no depender de lo que haya detrás.

¿Qué grosor de borde debo usar?

2px es el estándar: se ve nítido en pantallas retina y no compite visualmente con el texto. Por debajo de 1.5px el borde se pierde en pantallas de baja densidad. Por encima de 3px el botón empieza a parecer un recuadro, no un botón ghost.

¿Funciona el botón ghost en modo oscuro?

Sí, pero cambia el color base: un borde azul oscuro sobre fondo negro puede no llegar a 4.5:1. Define el color con una variable CSS (--btn-ghost-color). Ajústala dentro de tu media query o clase de modo oscuro en vez de duplicar todas las reglas.

¿Puedo usar estas clases con Tailwind o Bootstrap?

El CSS de este post es vanilla y se puede pegar tal cual en cualquier proyecto. En Tailwind, el equivalente al botón básico sería algo como border-2 border-blue-700 text-blue-700 bg-transparent hover:bg-blue-700 hover:text-white. En Bootstrap, la clase nativa más parecida es btn-outline-primary, aunque no trae por defecto el prefers-reduced-motion ni el focus-visible reforzado que ves aquí.

Recursos relacionados

• Más tutoriales de CSS en el blog, si quieres seguir ampliando componentes de UI.
• Botones PSD para páginas web, si prefieres partir de un diseño en Photoshop antes de picar CSS.

Copia el CSS que te haga falta y ajusta el color a tu marca. No te saltes el apartado de accesibilidad: un botón ghost mal contrastado es invisible para más gente de la que crees. Disfrútalos!