Botões com gradiente em CSS que parecem premium

Escrever CSS de botão com gradiente que pareça premium é questão de contenção. Escolha dois matizes vizinhos com luminosidade parecida, acrescente um leve realce ao longo da borda de cima, mova o gradiente no hover em vez de trocá-lo e confira se o texto se lê contra a parte mais clara. A versão barulhenta, com bordas arco-íris, é fácil de fazer e fácil de reconhecer como modelo pronto; 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 sutis e fortes

Um botão sutil usa dois matizes vizinhos 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 forte percorre matizes distantes e vira a coisa mais colorida da página. O forte pode funcionar em um momento único de lançamento ou em uma marca divertida; o sutil funciona em todo o resto. 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 cor de fundo, mas um botão tem uma faixa. Confira a cor do texto contra a parada mais clara, porque é onde o rótulo fica mais fraco. Texto de botão de tamanho normal precisa de 4,5:1 pelo WCAG, e o verificador de contraste da WebAIM torna cada parada uma conferência rápida. A falha habitual é um gradiente quente terminando em amarelo ou laranja claro, que parece enérgico e deixa metade do rótulo ilegível.

Mais sobre a matemática e os limites está em contraste de cores e acessibilidade, e a mesma regra vale para qualquer texto sobre um fundo em gradiente.

Estados de hover suaves em botões com gradiente

O background-image não faz transição: troque 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 é colocar o gradiente do hover em um pseudoelemento e esmaecer a opacidade dele, o que serve para hovers que mudam a cor por completo.

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

Mantenha as mudanças de hover pequenas. Um gradiente que se desloca um pouco e uma sombra que se aprofunda levemente parecem responsivos; um botão que muda de matiz por completo parece instável. Se você acrescentar movimento contínuo, como um brilho lento, desative-o para quem prefere movimento reduzido.

Bordas, contornos e botões secundários

Um botão com gradiente por tela costuma ser o certo: ele marca a ação principal. As ações secundárias ficam melhores em um estilo com contorno que ecoa o gradiente em uma borda fina. Dois fundos, um recortado na caixa de preenchimento e outro na caixa da borda, dão um contorno de gradiente arredondado com o meio sólido.

.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 carregando

Um botão com gradiente desativado deve deixar de parecer um convite. Remova o gradiente por completo em vez de só baixar a opacidade, o que pode deixar um botão desbotado, mas ainda colorido, que as pessoas tentam apertar. Um cinza liso e de baixo contraste com cursor: not-allowed se lê claramente como indisponível. Para o carregamento, mantenha o gradiente e troque o rótulo por um indicador de progresso para que o botão não mude de tamanho.

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

Acabamentos que parecem premium

• Um realce no topo. inset 0 1px 0 rgb(255 255 255 / 0.25) sugere uma fonte de luz acima e dá à superfície uma leve curvatura.
• Uma sombra tingida. Uma sombra no matiz do próprio botão, em vez de preta, o faz brilhar em vez de flutuar.
• Um só ângulo para tudo. Use o mesmo ângulo de gradiente, como 110deg, em todo controle com gradiente.
• Cores da marca, não predefinições. A mistura deve vir da sua paleta; gradientes na identidade de marca explica por quê.
• Um brilho cônico, com moderação. Uma camada cônica discreta pode dar um brilho metálico; veja gradientes cônicos em CSS.