Botão Css – Efeito Borda Ouline In
Postado: 7 de março de 2022
Tempo de Leitura: < 1 Minuto
Neste artigo vamos criar um Botão Css – Efeito Borda Ouline In com Html e css
Vamos Adicionar o Html:
<a href="#" class="btn outline-in"> <i class="icon icon-thumbs-o-up"></i> Leia mais...</a>
Vamos Adicionar o Css:
.btn {
padding: 0.8em 1em;
cursor: pointer;
background-color:#0f1010;
text-decoration: none;
font-weight:bold;
font-size:1em;
color: #fff;
transition:0.3s;
}
.btn:hover { background-color:#00cad2; }
.btn i { font-size:1em; margin-right:3px; }
.outline-in {
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-in:before {
pointer-events: none;
content: '';
position: absolute;
border: #00cad2 solid 3px;
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.outline-in:hover:before, .outline-in:focus:before, .outline-in:active:before {
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
opacity: 1;
}
Veja o Resultado!
Baixar Código
Veja Funcionando
Publicado por: Loop Nerd
614 Visualizações
Deixe um comentário