Construindo botão gradiente com HTML e CSS

Olá, seja muito bem vindo, no artigo de hoje vamos construir um botão usando a tag a do HTML e estilizar ele para que ele fique gradiente. Algo bem simples e em nível iniciante.

<a href="google.com"> Botão gradiente </a>

Com a nossa tag de link criada no HTML precisamos colocar um espaçamento dentro dela para que o texto do link não fique grudado no limite. Adicionaremos uma borda de raio 1rem e um sombreamento usando box-shadow. A cor do texto do nosso link ficará em branco juntamente com um transform uppercase para que ele fique em caixa alta.

Por fim, no nosso background, adicionamos um linear-gradiente, em 90º, nele vamos colocar duas cores sendo que a primeira tem uma porcentagem 0 e a segunda 100%.

a {
 padding: 1rem;
 border-radius: 1rem;
 background: linear-gradient(90deg, #00dffc 0%, #05444d 100%);
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
 color: #fff;
 text-transform: uppercase;
}

Se quisermos passar mais de uma cor podemos fazer isso sem passar a porcentagem, dessa forma: 

 background: linear-gradient(90deg, #00dffc, #05444d, #08262b);

Esse aqui é um gradiente simples, mas podemos ter outros tipos de gradiente nos nossos projetos, como gradientes cônicos, por exemplo. O artigo https://www.w3schools.com/css/css3_gradients_conic.asp mostra exemplos desse tipo de gradiente, caso queira dar uma olhada. Um abraço, e até a próxima.

Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/construindo-botao-gradiente-com-html-e.html