Botão Html e Css com Efeito Reflexo

Como fazer um menu dropdown Responsivo

Botão do whatsapp Html e css

Postado: 23 de janeiro de 2024 Tempo de Leitura: 2 Minutos

Neste artigo vamos criar um Botão Html e Css com Efeito Reflexo. mesmo com pouco conhecimento na área do desenvolvimento web veja como criar um Botão com Efeito Reflexo.

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 nas tags <button>, e a tag <span> para inserirmos o texto.

Essa tag que usaremos para criar o nosso Botão com Efeito Reflexo.

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:

HTML

<button class="botao">
   <span>Enviar</span>
</button>

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.

CSS

.botao {

  position: relative;
  padding: 10px 20px;
  font-family: inherit;
  background-color: transparent;
  border: 2px solid;
  font-size: 20px;
  font-weight: 600;
  color: #202020;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}

.botao:hover span {
  background: linear-gradient(135deg, #007cff 0%, #00d1be 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.botao::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: -110%;
  top: -0%;
  background: #00d1be;
  pointer-events: none;
  margin: auto;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.botao:hover {

  letter-spacing: 2px;
  border-image: linear-gradient(135deg, #007cff 0%, #00d1be 100% );
  border-image-slice: 1;

}

.botao:hover::before {
  left: 110%;
}

.botao:active {
  scale: 0.95;
}

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

Veja o Resultado baixo!