Botões degradê usando CSS: 10 exemplos de estilos diferentes

Aqui estão 10 exemplos de estilos diferentes de botões degradê usando CSS. Você pode usar esses estilos como ponto de partida e ajustar as cores e as classes CSS conforme necessário para atender às suas preferências e design.

1. Botão degradê vertical:

cssCopy code.button {
  background: linear-gradient(to bottom, #ff7f00, #ff5500);
  color: #fff;
}

2. Botão degradê horizontal:

cssCopy code.button {
  background: linear-gradient(to right, #00b3e6, #0088cc);
  color: #fff;
}

3. Botão degradê diagonal:

cssCopy code.button {
  background: linear-gradient(to bottom right, #ff3366, #993366);
  color: #fff;
}

4. Botão degradê em forma de arco-íris:

cssCopy code.button {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  color: #fff;
}

5. Botão degradê angular:

cssCopy code.button {
  background: linear-gradient(-45deg, #ff9966, #ff5e62);
  color: #fff;
}

6. Botão degradê em camadas:

cssCopy code.button {
  background: linear-gradient(to right, #ff0099, #00ff99),
              linear-gradient(to right, #ffff66, #ff00ff);
  background-size: 50% 100%, 50% 100%;
  background-position: left bottom, right bottom;
  background-repeat: no-repeat;
  color: #fff;
}

7. Botão degradê em forma de losango:

cssCopy code.button {
  background: linear-gradient(45deg, #33ccff, #ff99cc, #33ccff);
  color: #fff;
}

8. Botão degradê com borda gradiente:

cssCopy code.button {
  background: linear-gradient(to right, #ff9966, #ff5e62);
  border: 2px solid linear-gradient(to right, #ff9966, #ff5e62);
  color: #fff;
}

9. Botão degradê com efeito hover:

cssCopy code.button {
  background: linear-gradient(to right, #ff0099, #00ff99);
  color: #fff;
  transition: background 0.3s ease;
}

.button:hover {
  background: linear-gradient(to right, #00ff99, #ff0099);
}

10. Botão degradê com efeito de sombra:

cssCopy code.button {
  background: linear-gradient(to right, #ff9966, #ff5e62);
  color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

Esses são apenas exemplos de estilos de botões degradê usando CSS. Sinta-se à vontade para experimentar diferentes combinações de cores, direções de degradê e propriedades CSS para criar o estilo desejado.