Efeitos para os links dos posts

Views:
Confira o passo a passo desses códigos neste tutorial:

DA ESQUERDA PARA A DIREITA
.post-body a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
.post-body a:after {
content: "";
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
.post-body a:hover:after {
left: 0;
}


DA DIREITA PARA A ESQUERDA
.post-body a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
.post-body a:after {
content: "";
position: absolute;
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: #333;
transition: right .8s;
}
.post-body a:hover:after {
right: 0;
}


ACIMA E ABAIXO OPOSTOS
.post-body a {
position: relative;
overflow: hidden;
display: inline-block;
text-decoration: none;
color: #333;
}
.post-body a:before,
a:after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: #333;
transition: left .8s;
}
.post-body a:hover:before {
left: 0;
}
a:after {
top: auto;
bottom: 0;
left: auto;
right: -100%;
background: #333;
transition: right .8s;
}
.post-body a:hover:after {
right: 0;
}


DO CENTRO PARA OS LADOS
.post-body a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
}
.post-body a:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0px;
transition: all .8s;
}
.post-body a:hover:after {
width: 100%;
background: #333;
}


DUPLA, DO CENTRO PARA OS LADOS
.post-body a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
}
.post-body a:before,
.post-body a:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0px;
background: #333;
transition: all .8s;
}
.post-body a:hover:before,
a:hover:after {
width: 100%;
}


BORDA COMPLETA
.post-body a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
.post-body a:before,
.post-body a:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
transform: scale(0);
transition: 0.5s;
}
.post-body a:before {
border-bottom: 2px solid #333;
border-left: 2px solid #333;
transform-origin: 0 100%;
}
.post-body a:after {
border-top: 2px solid #333;
border-right: 2px solid #333;
transform-origin: 100% 0%;
}
.post-body a:hover:after,
.post-body a:hover:before {
transform: scale(1);
}


BORDA COMPLETA 2
.post-body a {
display: inline-block;
overflow: hidden;
position: relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
.post-body a:before,
.post-body a:after {
content: "";
width: 100%;
height: 2px;
position: absolute;
box-sizing: border-box;
transform: scale(0);
}
.post-body a:before {
transform: translateX(100%);
bottom: 0;
left: 0;
height: 2px;
border-bottom: 2px solid transparent;
border-left: 2px solid transparent;
transition: .1s transform linear, .1s height linear .1s;
}
.post-body a:after {
transform: translateX(-100%);
top: 0;
left: 0;
height: 2px;
border-top: 2px solid transparent;
border-right: 2px solid transparent;
transition: .1s transform linear .2s, .1s height linear .3s;
}
.post-body a:hover:after,
.post-body a:hover:before {
transform: translateX(0);
height: 100%;
border-color: #333;
}


ANIMAÇÃO DE FUNDO
.post-body a {
position: relative;
text-decoration: none;
color: #333;
z-index: 1;
}
.post-body a:before {
content: "";
background: #ccc;
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
transform: scaleX(0);
animation: .8s no-hover;
animation-fill-mode: forwards;
z-index: -1;
}
.post-body a:hover:before,
.post-body a:focus:before {
animation: .4s hover linear;
animation-fill-mode: forwards;
}
@keyframes hover {
0% {transform: scaleX(0);height: 5px;}
45% {transform: scaleX(1.05);height: 5px;}
55% {height: 5px;}
100% {transform: scaleX(1.05);height: 100%;}
}
@keyframes no-hover {
0% {transform: scaleX(1.05);height: 100%;}
45% {height: 5px;}
55% {transform: scaleX(1.05);height: 5px;opacity: 1;}
100% {transform: scaleX(0);height: 5px;opacity: .02;}
}


EFEITO 3D
.post-body a {
display: inline-block;
position: relative;
color: #333;
text-decoration: none;
transition: all .5s ease;
transform-style: preserve-3d;
}
.post-body a:after {
content: "Enlace";
position: absolute;
top: -100%;
left: 0px;
width: 100%;
background: #ccc;
transform-origin: left bottom;
transform: rotateX(90deg);
}
.post-body a:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}



Teste dos efeitos


Da esquerda para a direita

Da direita para a esquerda

Acima e abaixo opostos

Do centro para os lados

Dupla, do centro para os lados

Borda completa

Borda completa 2

Animação de fundo

Efeito 3D



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage