Vínculos diferentes

Hoy vamos a mostraros como podemos hacer que nuestros enlaces se muesten de forma diferente.

Para ello vamos a usar CSS

ver código

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

2. De derecha a izquierda

ver código

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

3. Arriba y abajo opuestos

ver código

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

4. Del centro a los lados

ver código

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

5. Doble del centro a los lados

ver código

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

6. Borde completo

ver código

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

7. Borde completo bis

ver código

a {
display: inline-block;
overflow: hidden;
position: relative;
color: #333;
text-decoration: none;
padding: 0 4px;
}
a:before,
a:after {
content: "";
width: 100%;
height: 2px;
position: absolute;
box-sizing: border-box;
transform: scale(0);
}
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;
}
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;
}
a:hover:after,
a:hover:before {
transform: translateX(0);
height: 100%;
border-color: #333;
}

8. Fondo animado

ver código

a {
position: relative;
text-decoration: none;
color: #333;
z-index: 1;
}
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;
}
a:hover:before,
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;}
}

9. Efecto 3D

ver código

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

Para ello elegimos el que más nos guste.