Botones con degradado en CSS que se sientan premium

Escribir CSS de botón con degradado que se vea premium se reduce a la contención. Elige dos tonos vecinos de luminosidad parecida, añade un leve resalte en el borde superior, mueve el degradado en el hover en lugar de cambiarlo y comprueba que el texto se lee sobre la parte más clara. La versión llamativa, con bordes arcoíris, es fácil de hacer y fácil de reconocer como plantilla; la versión discreta es la que hace que un producto parezca terminado.

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  background-color: #4f46e5;
  background-image: linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 6px 16px -6px rgb(79 70 229 / 0.6);
  transition: background-position 0.5s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.button:hover {
  background-position: 100% 50%;
}

.button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}

Botones con degradado sutiles frente a llamativos

Un botón sutil usa dos tonos que están juntos en la rueda de color, como índigo y violeta, para que el degradado se lea como profundidad y no como decoración. Un botón llamativo abarca tonos lejanos y se convierte en lo más colorido de la página. Lo llamativo puede funcionar para un momento de lanzamiento o una marca juguetona; lo sutil funciona en todo lo demás. Todas las paletas de abajo mantienen el texto blanco por encima de 4,5:1 en ambos extremos.

Contraste del texto en los botones con degradado

Un comprobador de contraste toma un solo color de fondo, pero un botón tiene un rango. Comprueba el color del texto frente al punto más claro, porque ahí la etiqueta es más débil. El texto de botón de tamaño normal necesita 4,5:1 según WCAG, y el comprobador de contraste de WebAIM hace de cada punto una comprobación rápida. El fallo habitual es un degradado cálido que termina en amarillo o naranja claro, que se ve enérgico y deja la mitad de la etiqueta ilegible.

Hay más sobre las matemáticas y los umbrales en contraste de color y accesibilidad, y la misma regla se aplica a cualquier texto sobre un fondo degradado.

Estados hover suaves para botones con degradado

background-image no admite transiciones: cambia un degradado por otro en el hover y salta de golpe. Hay dos alternativas suaves. La primera, usada en la receta de arriba, es pintar el degradado al doble de ancho y deslizar background-position. La segunda es poner el degradado del hover en un pseudoelemento y fundir su opacidad, algo que encaja con hovers que cambian por completo de color.

.button--fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(110deg, #be123c, #c2410c);
}

.button--fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(110deg, #c2410c, #be123c);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--fade:hover::before {
  opacity: 1;
}

Mantén pequeños los cambios del hover. Un degradado que se desplaza un poco y una sombra que se intensifica ligeramente se sienten reactivos; un botón que cambia de tono por completo se siente inestable. Si añades movimiento continuo, como un brillo lento, desactívalo para quienes prefieren el movimiento reducido.

Bordes, contornos y botones secundarios

Un botón con degradado por pantalla suele ser lo correcto: marca la acción principal. Las acciones secundarias quedan mejor en un estilo de contorno que se hace eco del degradado en un borde fino. Dos fondos, uno recortado al padding box y otro al border box, dan un contorno degradado redondeado con el centro liso.

.button--outline {
  border: 2px solid transparent;
  border-radius: 999px;
  color: #312e81;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #4f46e5, #9333ea) border-box;
}

Estados desactivado y de carga

Un botón con degradado desactivado debe dejar de parecer una invitación. Quita el degradado por completo en lugar de solo bajar la opacidad, lo que puede dejar un botón desvaído pero aún colorido que la gente intenta pulsar. Un gris plano y de poco contraste con cursor: not-allowed se lee claramente como no disponible. Para la carga, mantén el degradado y cambia la etiqueta por un indicador para que el botón no cambie de tamaño.

.button:disabled {
  background-image: none;
  background-color: #e5e7eb;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}

Toques finales que se leen como premium

• Un resalte superior. inset 0 1px 0 rgb(255 255 255 / 0.25) sugiere una fuente de luz arriba y da a la superficie una ligera curva.
• Una sombra teñida. Una sombra del propio tono del botón, en lugar de negra, lo hace brillar en vez de flotar.
• Un solo ángulo para todo. Usa el mismo ángulo de degradado, como 110deg, en todos los controles con degradado.
• Colores de marca, no ajustes predefinidos. La mezcla debe salir de tu paleta; el branding con degradados explica por qué.
• Un brillo cónico, con moderación. Una leve capa cónica puede añadir un destello metálico; mira los degradados cónicos CSS.