Botão Html Css Background Animado

Botão Html Css Background Animado

Neste artigo veja como fazer Botão Html Css Background Animado.

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 <p> para inserirmos o texto. 

Essa tag que usaremos para criar o nosso Botão Html Css Background Animado.

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:

 <button class="botao">
                      
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <p>Enviar</p>
               
 </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.

.botao {

  padding: 12px 38px;
  background: transparent;
  border: 2px solid #0ae918;
  font-size: 15px;
  font-weight: bold;
  color: #161616;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  display: flex;
  margin: auto;
  overflow: hidden;
  transition: all 0.5s;
  text-transform: uppercase;

}

.botao:hover {
  color: #ffffff;
}

.botao span {
  transition: all 0.5s;
  z-index: 1;
}

.botao p { z-index:2; }

.botao span:nth-child(1), 
.botao span:nth-child(2), 
.botao span:nth-child(3), 
.botao span:nth-child(4) {
  position: absolute;
  width: 100%;
  height: 15px;
  background-color: #0ae918
}

.botao span:nth-child(1) {
  top: -100%;
  left: 0%;
  right: 0;
}

.botao:hover span:nth-child(1) {
  top: 0%;
}

.botao span:nth-child(2) {
  top: 10px;
  right: 100%;
}

.botao:hover span:nth-child(2) {
  right: 0;
}

.botao span:nth-child(3) {
  top: 20px;
  left: 100%;
  right: 0;
}

.botao:hover span:nth-child(3) {
  left: 0;
}

.botao span:nth-child(4) {
  bottom: -100%;
  left: 0;
}

.botao:hover span:nth-child(4) {
  bottom: 0;
}

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

Veja o Resultado baixo!

Botão Html Css Background Animado

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar um Botão Html Css Background Animado. 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.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)