Borda Animada Css

Borda Animada Css

Como fazer um botão com bordas animadas, só com HTML e CSS.

A animação de borda CSS vamos usar o modo hover para criar animação de borda animada quando passamos o mouse sobre o botão.

Vamos adicionar o Código Html

Nesta seção, projetaremos uma estrutura simples na <div> aplicando a class=”borda-animada” dentro da <div> vamos inserir o href para incluirmos o link.

     <div class="borda-animada">
                
        <a href="#" title="Leia mais">Leia mais</a>
                
     </div>

Vamos adicionar o Css

Nesta seção, usaremos algumas propriedades CSS3 para projetar o efeito de borda animada. para obter o efeito de animação na borda utilizaremos o @keyframes no css3.

.borda-animada {

  margin:auto;
  height:40px;
  width:130px;
  border-radius:4px;
  text-align: center;
  display: table;
  font-size:1em;
  background: -webkit-linear-gradient(left, #00CFD5 50%, transparent 50%), 
  -webkit-linear-gradient(left, #00CFD5 50%, transparent 50%), 
  -webkit-linear-gradient(top, #00CFD5 50%, transparent 50%), 
  -webkit-linear-gradient(top, #00CFD5 50%, transparent 50%);
}

.borda-animada a {

  display: table-cell;
  vertical-align: middle;
  text-decoration:none;
  color:#00CFD5;

}

.borda-animada {

  background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, left bottom, 0 0, right 0;

}

.borda-animada:hover {

  -webkit-animation: anima-borda 10s linear infinite;
          animation: anima-borda 10s linear infinite;

}

@-webkit-keyframes anima-borda {
  0% {
    background-position: 0 0, left bottom, 0 0, right 0;
  }
  100% {
    background-position: 1000px 0, -1000px bottom, 0 -1000px, right 1000px;
  }
}

@keyframes animaborda {
  0% {
    background-position: 0 0, left bottom, 0 0, right 0;
  }
  100% {
    background-position: 1000px 0, -1000px bottom, 0 -1000px, right 1000px;
  }
}

Nesta seção, combinaremos as duas seções acima para criar O efeito na borda, Utilizando HTML + CSS.

Código Completo Veja o Resultado! 

Baixar Código Veja Funcionando