Botão Hover – Outline Out

Botão Hover – Outline Out

Neste tutorial vamos fazer um botão hover css com efeito de contorno externo quando passamos o mouse sobre ele.

Vamos Adicionar o Html:

<a href="#" class="btn outline-out" title="Veja mais"><i class="icon icon-forward-1"></i> Veja mais</a>

Vamos Adicionar o Css:

.btn {

    padding: 0.8em 1.5em;
    cursor: pointer;
    background: #1da9d5;
    text-decoration: none;
    font-weight:bold;
    color: #fff;

}

.outline-out {
 
  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;
  position: relative;

}

.outline-out:before {

  content: '';
  position: absolute;
  border: #1da9d5 solid 3px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;

}

.outline-out:hover:before, .outline-out:focus:before, .outline-out:active:before {

  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;

}

Veja o Resultado !

Baixar Código Veja Funcionando