# Botões com gradiente em CSS que parecem premium

[Canonical HTML page](https://gradiently.design/pt-pt/guide/css-gradient-button)

A maioria dos botões com gradiente parece barata pelas mesmas poucas razões: demasiados matizes, um hover que salta e texto que se apaga na ponta clara. Eis a receita que evita as três.

## The short version

- Um botão com gradiente premium costuma misturar dois matizes vizinhos com luminosidade semelhante, com um ténue realce ao longo da aresta superior.
- Os gradientes não fazem transição, por isso um hover suave move um gradiente sobredimensionado com background-position ou esbate uma sobreposição com opacity.
- O texto branco num botão com gradiente precisa de pelo menos 4,5:1 de contraste com a parte mais clara do gradiente, não só com a mais escura.
- Um estado premido pode ser tão simples como deslocar o botão um píxel para baixo e retirar-lhe a sombra exterior.
- Os botões com gradiente funcionam melhor como a única ação principal de um ecrã, com as ações secundárias lisas ou só com contorno.

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.

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

A receita completa: um gradiente de largura dupla que desliza no hover, um realce superior, uma sombra tingida e um estado premido.

Índigo a roxo e de volta: `linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5)`

O gradiente do botão em largura total. Em repouso vês a metade esquerda; no hover desliza para a metade direita, que termina de novo em índigo.

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

- Subtil: índigo a roxo: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Subtil: azul-real a verde-azulado: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Quente: carmesim a laranja queimado: `linear-gradient(110deg, #be123c, #c2410c)`
- Ousado: roxo a magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Gradientes de botão que mantêm o texto branco legível. Paragens medidas: 6,3 e 5,4, 6,7 e 5,4, 6,3 e 5,2, 5,4 e 4,7 para 1.

## 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](https://webaim.org/resources/contrastchecker/) 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.

### Evita

- Laranja a amarelo, #f97316 a #fbbf24, sob texto branco: 2,8 e 1,7 para 1
- Gradientes pastel claros com etiquetas brancas
- Verificar só a cor por trás da primeira letra
- Pesos de letra finos e leves sobre um gradiente cheio

### Faz

- Paragens profundas com luminosidade parecida, como carmesim a laranja queimado
- Em vez disso, texto escuro sobre gradientes pastel
- Verifica a paragem mais clara e o ponto médio
- Pesos de 600 ou mais para etiquetas sobre gradientes

Há mais sobre a matemática e os limiares em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility), e a mesma regra aplica-se a qualquer [texto sobre um fundo em gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient).

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

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

Um hover com fusão. A opacidade é barata de animar e a etiqueta fica por cima da sobreposição.

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](https://gradiently.design/pt-pt/guide/reduced-motion).

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

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

Um contorno com gradiente para ações secundárias. As [bordas com gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-border) tratam das versões transparentes e animadas.

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

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

Desativado quer dizer liso. O gradiente só volta quando a ação está disponível.

## 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](https://gradiently.design/pt-pt/guide/gradient-branding) 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](https://gradiently.design/pt-pt/guide/css-conic-gradient).

## FAQ

### Como faço um botão com gradiente em CSS?

Define `background-image: linear-gradient(110deg, #4f46e5, #9333ea)` no botão, com texto branco, cantos arredondados e uma `background-color` lisa de reserva.

### Como animo um botão com gradiente no hover?

Faz o gradiente com o dobro da largura com `background-size: 200% 100%` e faz a transição do `background-position`, ou esbate um pseudoelemento que leve o gradiente do hover.

### Porque é que o meu botão com gradiente muda instantaneamente no hover?

Os navegadores não conseguem fazer a transição entre dois valores de `background-image`. Move ou esbate o gradiente em vez de o substituir.

### Que cor de texto funciona num botão com gradiente?

A que atinja pelo menos 4,5:1 de contraste com a parte mais clara do gradiente. O branco funciona em gradientes profundos; o texto escuro serve para pastéis.

### Todos os botões devem usar um gradiente?

Não. Usa um gradiente para a única ação principal de um ecrã e mantém os botões secundários lisos ou só com contorno, para que o importante se destaque.