Botão Hover Transition
Postado: 26 de setembro de 2021
Tempo de Leitura: 2 Minutos
Neste artigo vamos fazer um Botão Hover Transition com css.
Hover Transition é um efeito de transição quando passamos o mouse sobre o link.
Veja o exemplo abaixo.
Vamos Adicionar o Link no Html:
<a href="#" class="link"> <span><i class="icon icon-forward-1"></i> Saiba mais... </span> </a>
<a href="#" class="btn-quadrado"> <span> <i class="icon icon-forward-1"></i> Hover Me</span> </a>
<a href="#" class="btn-redondo"> <span> <i class="icon icon-forward-1"></i> Saiba mais...</span> </a>
Vamos adicionar o Css para estilizar o nosso Link:
/*Link Hover Trasition*/
.link {
text-decoration: none;
color:#4c4c4c;
position: relative;
font-size: 1em;
padding: 0.4em 1.3em;
overflow:hidden;
display:inline-block;
transition:0.4s;
}
.link:hover { color: #ffffff; }
.link span {
background-color: ;
z-index: 2;
position: relative;
left: 0;
top: 0;
}
.link span i { font-size:0.6em; margin-right:5px; }
.link::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.link:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.link::before {
content: "";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(199.8, 100%, 50%);
z-index:1;
transition: transform .3s ease;
}
/*Botão Redondo Hover Trasition*/
.btn-redondo {
text-decoration: none;
color:#ffffff;
background-color:#4c4c4c;
position: relative;
font-size: 1em;
padding: 0.4em 1.3em;
border-radius:50px;
overflow:hidden;
display:inline-block;
transition:0.4s;
}
.btn-redondo:hover { color:#ffffff; }
.btn-redondo span {
background-color: ;
z-index: 2;
position: relative;
left: 0;
top: 0;
}
.btn-redondo span i { font-size:0.6em; margin-right:5px; }
.btn-redondo::before {
border-radius:50px;
transform: scaleX(0);
transform-origin: bottom right;
}
.btn-redondo:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.btn-redondo::before {
content: "";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(199.8, 100%, 50%);
z-index:1;
transition: transform .3s ease;
}
/*Botão Quadrado Hover Trasition*/
.btn-quadrado {
text-decoration: none;
color:#ffffff;
background-color:#4c4c4c;
position: relative;
font-size: 1em;
padding: 0.4em 1.3em;
overflow:hidden;
display:inline-block;
transition: 0.4s;
}
.btn-quadrado:hover { color:#ffffff; }
.btn-quadrado span {
background-color: ;
z-index: 2;
position: relative;
left: 0;
top: 0;
}
.btn-quadrado span i { font-size:0.6em; margin-right:5px; }
.btn-quadrado::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.btn-quadrado:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.btn-quadrado::before {
content: "";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: hsl(199.8, 100%, 50%);
z-index:1;
transition: transform .3s ease;
}
Veja o Resultado !
Baixar Código
Veja Funcionando
Publicado por: Loop Nerd
1.005 Visualizações
Deixe um comentário