Botão Html e Css Animação Simples

Botão Html e Css com Listras Animadas

Botão Html e Css Efeito 3D

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

Neste artigo veja como fazer Botão Html e Css Animação Simples.

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>, <svg>, e a tag <span> para inserirmos o texto desejado.

Essa tag que usaremos para criar o nosso Botão Html e Css Animação Simples.

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">

      
      <svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" stroke-linejoin="round" stroke-linecap="round"></path>
      </svg>

      <span class="texto">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 {
  
  background-color: #ffffff;
  color: #009fe4;
  width: 140px;
  height: 2.9em;
  border: #009fe4 0.1em solid;
  border-radius: 50px;
  text-align: right;
  font-size: 16px;
  transition: all 0.6s ease;

}

.botao:hover {

  background-color: #009fe4;
  color: #ffffff;
  cursor: pointer;
  border-radius: 8px;

}

.botao:active {

  background-color: #161616;
  border: #161616 0.1em solid;

}

.botao:active.botao svg {

  margin: -0.2em 0.6em 1em;

}

.botao svg {

  width: 1.6em;
  margin: -0.2em 1.2em 1em;
  position: absolute;
  display: flex;
  transition: all 0.6s ease;

}

.botao:hover svg {

  transform: translateX(5px);

}

.texto { margin:0 2.1em; font-weight:bold; }

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

Veja o Resultado baixo!