# Botões com gradiente em CSS que parecem premium

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

A maioria dos botões com gradiente parece barata pelos mesmos poucos motivos: matizes demais, um hover que pula e texto que some na ponta clara. Aqui está a receita que evita os três.

## The short version

- Um botão com gradiente premium costuma misturar dois matizes vizinhos com luminosidade parecida, com um leve realce ao longo da borda de cima.
- Gradientes não fazem transição, então um hover suave move um gradiente superdimensionado com background-position ou esmaece uma sobreposição com opacity.
- Texto branco em um botão com gradiente precisa de pelo menos 4,5:1 de contraste contra a parte mais clara do gradiente, não só contra a mais escura.
- Um estado pressionado pode ser tão simples quanto deslocar o botão um pixel para baixo e remover a sombra externa.
- Botões com gradiente funcionam melhor como a única ação principal de uma tela, com as ações secundárias lisas ou só com contorno.

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.

```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 inteira: um gradiente de largura dupla que desliza no hover, um realce no topo, uma sombra tingida e um estado pressionado.

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

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

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

- Sutil: índigo a roxo: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Sutil: azul-real a turquesa: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Quente: carmim a laranja queimado: `linear-gradient(110deg, #be123c, #c2410c)`
- Forte: roxo a magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Gradientes de botão que mantêm o texto branco legível. Paradas 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 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](https://webaim.org/resources/contrastchecker/) 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.

### Evite

- Laranja a amarelo, #f97316 a #fbbf24, sob texto branco: 2,8 e 1,7 para 1
- Gradientes pastéis claros com rótulos brancos
- Conferir só a cor atrás da primeira letra
- Pesos de fonte finos e leves sobre um gradiente cheio

### Faça

- Paradas profundas de luminosidade parecida, como carmim a laranja queimado
- Texto escuro em gradientes pastéis
- Confira a parada mais clara e o ponto médio
- Pesos de 600 ou mais para rótulos sobre gradientes

Mais sobre a matemática e os limites está em [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility), e a mesma regra vale para qualquer [texto sobre um fundo em gradiente](https://gradiently.design/pt-br/guide/text-on-gradient).

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

```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 fade cruzado. A opacidade é barata de animar, e o rótulo fica acima da sobreposição.

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

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

```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 de gradiente para ações secundárias. [Bordas com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-border) trata das versões transparentes e animadas.

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

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

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

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

## FAQ

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

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

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

Deixe o gradiente com o dobro da largura com `background-size: 200% 100%` e faça a transição do `background-position`, ou esmaeça um pseudoelemento que contenha o gradiente do hover.

### Por que meu botão com gradiente muda de repente no hover?

Os navegadores não fazem transição entre dois valores de `background-image`. Mova ou esmaeça o gradiente em vez de substituí-lo.

### Qual cor de texto funciona em um botão com gradiente?

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

### Todo botão deve usar gradiente?

Não. Use o gradiente na única ação principal de uma tela e mantenha os botões secundários lisos ou só com contorno, para que o importante se destaque.