Botão Css – Borda Fade

Neste tutorial vamos fazer um Botão Css – Borda Fade com html e css

Vamos Adicionar o Html:

  <a href="#" class="btn borda-fade">Saiba mais...</a>

Vamos Adicionar o Css:

.btn { 

  background-color: #3d3e3e;
  padding: 0.8em 1em;
  color: #fff;
  font-size: 1em;
  text-decoration: none;

}

.borda-fade {

  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px #3d3e3e, 0 0 1px rgba(0, 0, 0, 0);

}

.borda-fade:hover, .borda-fade:focus, .borda-fade:active {

  box-shadow: inset 0 0 0 4px #ffef00, 0 0 1px rgba(0, 0, 0, 0);
  color:#ffef00;
  transition:0.5s;  

}

Veja o Resultado !

Baixar Código Veja Funcionando