Botão Html e css Icone Efeito Slide

Botão Html e Css Efeito de Duas Camadas

Botão Html e Css com Listras Animadas

Postado: 12 de fevereiro de 2024 Tempo de Leitura: 2 Minutos

Neste artigo veja como fazer Botão Html e css3 Icone Efeito Slide.

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>, <span> e a tag <i> para inserirmos o ícone desejado.

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

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 class="icon">
        
        <i class="icon icon-hand-peace-o"></i>

    </span>

    <span class="text">Cadastrar</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 {

  width: 180px;
  height: 50px;
  border-radius: 50px;
  border: none;
  transition: all 0.5s ease-in-out;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  display: flex;
  cursor: pointer;
  margin: auto;
  align-items: center;
  background: #007cff;
  color: #ffffff;

}

.botao:hover {
  box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.botao .icon {
  position: absolute;
  height: 40px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.botao .text {
  transform: translateX(55px);
}

.botao:hover .icon {
  width: 175px;
}

.botao:hover .text {
  transition: all 0.5s;
  opacity: 0;
}

.botao:focus {
  outline: none;
}

.botao:active .icon {
  
  transform: scale(1.3);
  transition: all 0.1s;
  color: #ffef00;

}

.botao:active { 

  background-color:#161616;   
  transition: all 0.1s;
 
}

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

Veja o Resultado baixo!