Botão Html e css Efeito Dourado

Botão Html e css Efeito Dourado

Olá Nerd, neste artigo vamos criar um Botão Html e css Efeito Dourado. mesmo com pouco conhecimento na área do desenvolvimento web.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para o botão vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples na tag <button>. 

Essa tag que usaremos para criar o nosso Botão Html e css Efeito Dourado.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Botão.

Estrutura Código Html:

<a href="#" class="btn-dourado"> Saiba mais</a>

Estrutura Código CSS

Para conseguirmos o efeito desejado no botão, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso Botão Html com Efeito Dourado.

.btn-dourado {

  width: 160px;
  height: 45px;
  margin: auto;
  border: none;
  border-radius: 40px;
  background: linear-gradient(to right,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1em;
  letter-spacing: 3px;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition-duration: 0.5s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.144);
  background-size: 250% 200%;
  padding: 0 20px;

}

.btn-dourado:hover {
  
  transform: scale(0.95);
  letter-spacing: 2px;
  transition-duration: 0.5s;
  animation: gradient 0.5s ease infinite;
  background-position: 22%;

}

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Botão Html e css Efeito Dourado

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar Botão com Efeito Dourado. existem diversas formas de criar botões com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.