Botões com gradiente em CSS que parecem premium

Escrever CSS de botão com gradiente com ar premium resume-se a contenção. Escolhe dois matizes vizinhos com luminosidade parecida, acrescenta um ténue realce ao longo da aresta superior, move o gradiente no hover em vez de o trocar e verifica se o texto se lê sobre a parte mais clara. A versão ruidosa, com bordas arco-íris, é fácil de fazer e fácil de reconhecer como modelo; a versão discreta é o que faz um produto parecer acabado.

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

Botões com gradiente subtis ou ruidosos

Um botão subtil usa dois matizes que ficam lado a lado no círculo cromático, como índigo e roxo, para que o gradiente se leia como profundidade e não como decoração. Um botão ruidoso abrange matizes distantes e torna-se a coisa mais colorida da página. O ruidoso pode funcionar num momento de lançamento ou numa marca brincalhona; o subtil funciona em todos os outros casos. Todas as paletas abaixo mantêm o texto branco acima de 4,5:1 nas duas pontas.

Contraste do texto em botões com gradiente

Um verificador de contraste recebe uma só cor de fundo, mas um botão tem uma gama. Verifica a cor do texto contra a paragem mais clara, porque é aí que a etiqueta é mais fraca. O texto de botão de tamanho normal precisa de 4,5:1 segundo as WCAG, e o verificador de contraste da WebAIM torna cada paragem uma verificação rápida. A falha habitual é um gradiente quente a acabar em amarelo ou laranja-claro, que parece enérgico e deixa metade da etiqueta ilegível.

Há mais sobre a matemática e os limiares em contraste de cor e acessibilidade, e a mesma regra aplica-se a qualquer texto sobre um fundo em gradiente.

Estados de hover suaves para botões com gradiente

O background-image não faz transição: troca um gradiente por outro no hover e ele estala. Há duas alternativas suaves. A primeira, usada na receita acima, é pintar o gradiente com o dobro da largura e deslizar o background-position. A segunda é pôr o gradiente do hover num pseudoelemento e esbater a sua opacidade, o que serve para hovers que mudam completamente de cor.

.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ém as mudanças de hover pequenas. Um gradiente que se desloca um pouco e uma sombra que se aprofunda ligeiramente parecem reativos; um botão que muda de matiz por completo parece instável. Se acrescentares movimento contínuo, como um brilho lento, desliga-o para quem prefere movimento reduzido.

Bordas, contornos e botões secundários

Um botão com gradiente por ecrã costuma ser o certo: marca a ação principal. As ações secundárias ficam melhores num estilo de contorno que ecoa o gradiente numa aresta fina. Dois fundos, um recortado à caixa de preenchimento e outro à caixa da borda, dão um contorno com gradiente arredondado e meio 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 desativado e de carregamento

Um botão com gradiente desativado deve deixar de parecer um convite. Remove o gradiente por completo em vez de só baixar a opacidade, o que pode deixar um botão esbatido mas ainda colorido que as pessoas tentam premir. Um cinzento liso e de baixo contraste com cursor: not-allowed lê-se claramente como indisponível. No carregamento, mantém o gradiente e troca a etiqueta por um indicador de progresso para o botão não mudar de tamanho.

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

Retoques finais que parecem premium

• Um realce superior. inset 0 1px 0 rgb(255 255 255 / 0.25) sugere uma fonte de luz acima e dá à superfície uma ligeira curvatura.
• Uma sombra tingida. Uma sombra no matiz do próprio botão, em vez de preta, faz com que brilhe em vez de flutuar.
• Um só ângulo para tudo. Usa o mesmo ângulo de gradiente, como 110deg, em todos os controlos com gradiente.
• Cores da marca, não predefinições. A mistura deve vir da tua paleta; o guia sobre branding com gradientes explica porquê.
• Um brilho cónico, com parcimónia. Uma camada cónica ténue pode acrescentar um reflexo metálico; vê os gradientes cónicos em CSS.