5 Botões Css com Linhas Animadas

5 Botões Css com Linhas Animadas

Neste artigo vamos criar 5 Botões Css com Linhas Animadas estilizado com Css. ao passar o mouse sobre o elemento html as animações inicia conforme programado e estilizado nos Códigos Css de cada Botão.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Botão vai ser composta 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. 

Essas tags que usaremos para criar os 5 Botões Css com Linhas Animadas.

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 dos Botões.

Estrutura Código Html:

  <button class="botao btn-3 hover-border-1">
    <span>hover me</span>
  </button>

  <button class="botao btn-3 hover-border-2">
    <span>hover me</span>
  </button>

  <button class="botao btn-3 hover-border-3">
    <span>hover me</span>
  </button>

  <button class="botao btn-3 hover-border-4">
    <span>hover me</span>
  </button>

  <button class="botao btn-3 hover-border-5">
    <span>hover me</span>
  </button>

Estrutura Código CSS

Para conseguirmos o efeito desejado nos Botões, 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 Botões Css com o efeito desejado.

.botao:active, .botao:hover, .botao:focus {
  outline: 0!important;
  outline-offset: 0;
}

.botao::before,
.botao::after {
  position: absolute;
  content: "";
}

.botao {

  position: relative;
  display: inline-block;
  width: auto; height: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0px 25px 15px;
  min-width: 150px;

}

.botao span {         

    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    top: 0; left: 0;
    width: 100%;
    padding: 15px 20px;
    transition: 0.3s;

}

/*--- btn-3 ---*/
.btn-3 {
  padding: 5px;
}

.btn-3 span {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 124, 255);
}

.btn-3::before,
.btn-3::after {
  background: transparent;
  z-index: 2;
}

.botao.hover-border-1::before,
.botao.hover-border-1::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}

.botao.hover-border-1::before {
  top: 0; left: 0;
  border-left: 1px solid rgb(0, 124, 255);
  border-top: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-1::after {
  bottom: 0; right: 0;
  border-right: 1px solid rgb(0, 124, 255);
  border-bottom: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-1:hover::before,
.botao.hover-border-1:hover::after {
  width: 99%;
  height: 98%;
}

/* 12. hover-border-2 */
.botao.hover-border-2::before,
.botao.hover-border-2::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}

.botao.hover-border-2::before {
  bottom: 0; left: 0;
  border-left: 1px solid rgb(0, 124, 255);
  border-bottom: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-2::after {
  top: 0; right: 0;
  border-right: 1px solid rgb(0, 124, 255);
  border-top: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-2:hover::before,
.botao.hover-border-2:hover::after {
  width: 99%;
  height: 99%;
}

/* 13. hover-border-3 */
.botao.hover-border-3::before,
.botao.hover-border-3::after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}

.botao.hover-border-3::before {
  top: 0; right: 0;
  border-top: 1px solid rgb(0, 124, 255);
  border-left: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-3::after {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgb(0, 124, 255);
  border-right: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-3:hover::before,
.botao.hover-border-3:hover::after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;   
}

/* 14. hover-border-4 */
.botao.hover-border-4::before,
.botao.hover-border-4::after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}

.botao.hover-border-4::before {
  bottom: 0; left: -1px;
  border-top: 1px solid rgb(0, 124, 255);
  border-left: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-4::after {
  top: 0; right: 0;
  border-bottom: 1px solid rgb(0, 124, 255);
  border-right: 1px solid rgb(0, 124, 255);
}

.botao.hover-border-4:hover::before,
.botao.hover-border-4:hover::after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;   
}

/* 15. hover-border-5 */
.botao.hover-border-5::before,
.botao.hover-border-5::after {
  width: 0%; height: 0%;
  opacity: 0;
}

.botao.hover-border-5::before {
  top: 0; right: 0;
  border-top: 1px solid rgb(0, 124, 255);
  border-left: 1px solid rgb(0, 124, 255);
  transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
}

.botao.hover-border-5::after {
  bottom: 0; left: 0px;
  border-bottom: 1px solid rgb(0, 124, 255);
  border-right: 1px solid rgb(0, 124, 255);
  transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
}

.botao.hover-border-5:hover::before,
.botao.hover-border-5:hover::after {
  width: 100%; height: 96%;
  opacity: 1;
}

.botao.hover-border-5:hover::before {
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;   /* 1,2 */
}

.botao.hover-border-5:hover::after {
  transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s; 
}

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

Veja o Resultado baixo!

5 Botões Css com Linhas Animadas

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Botões com Css.

existem diversas formas de estilizar 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.