Botão de Download Animado com Html e Css

Botão de Download Animado com Html e Css

Olá Nerd, neste artigo veja com poucos passos como podemos criar um Botão de Download Animado com Html e Css. mesmo com pouco conhecimento na área do desenvolvimento web.

Estrutura Base que vamos usar no Botão de download é Html e Css

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> , <div>, <svg> e á tag <p> para inserirmos o Texto do Botão. 

Essas tags que usaremos para criar o nosso Botão de download com html e css.

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">
      
      <p class="texto">Download </p>
      
      <div class="svg">
        <svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-download" viewBox="0 0 16 16"> <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path> <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path> </svg>
      </div>

    </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 o nosso Botão de Download.

.botao {
  
  padding: 0.6rem 4rem;
  border: none;
  outline: none;
  font-size: 1.3rem;
  border-radius: 50px;
  font-weight: 600;
  background-color: rgb(255, 155, 0);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s ease-in-out;
  color: #fff;

}

.botao .texto {
  
  position: absolute;
  left: 1.5em;
  top: 0.7em;
  transition: 0.4s ease-in-out;
  color: #ffffff;

}

.svg {
  transform: translateY(-20px) rotate(30deg);
  opacity: 0;
  width: 2rem;
  transition: 0.4s ease-in-out;
}

.botao:hover {
  background-color: rgb(50, 50, 50);
}

.botao:hover .svg {
  display: inline-block;
  transform: translateY(0px) rotate(0deg);
  opacity: 1;
}

.botao:hover .texto {
  opacity: 0;
}

.botao:active {
  scale: 0.97;
}

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

Veja o Resultado baixo!

Botão de Download com html e css.

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar  um Botão com efeito Download. 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)