By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Link Animation
Overview
Simple hover animation that adds an underline in the bottom of the link button.
<a href="#" class="underline-link">
Claudio César Calabrese Ruíz
</a>.underline-link {
position: relative;
&:before {
content: "";
height: 1px;
width: 0;
background-color: currentColor;
position: absolute;
bottom: -2px;
left: 0;
transition: width 0.4s ease-in-out;
}
&:hover {
&:before {
width: 100%;
}
}
&.active {
&:before {
width: 100%;
}
}
}<div class="link-text with-arrow">
<a href="#">
<span>Ver Áreas de Práctica</span>
</a>
</div>.link-text {
position: relative;
&.with-arrow {
color: black;
padding-right: 10px;
a,
.arrow {
position: relative;
cursor: pointer;
span {
&:after {
content: "";
display: inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='7px' height='7px' viewBox='0 0 7 7' version='1.1'%3E%3C!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com --%3E%3Ctitle%3EFill 1%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='p/Link/blanco' transform='translate(-202.000000, -7.000000)' fill='black'%3E%3Cg id='Link'%3E%3Cpolygon id='Fill-1' points='202.542043 7.7 204.024989 9.18345785 205.697139 9.18857146 202 12.8851991 203.109653 13.9948522 206.791451 10.313054 206.791451 11.9448065 208.279 13.4323552 208.279 7.7'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
height: 7px;
width: 1em;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: -1px;
right: -7px;
}
&:hover:after {
animation: arrowAnim 0.4s ease-in-out;
animation-delay: 0.4s;
}
}
&:hover {
&:before {
width: calc(100% - 12px);
}
}
&.active {
&:before {
width: calc(100% - 12px);
}
}
}
}
}
@keyframes arrowAnim {
0% {
right: -7px;
top: -1px; }
50% {
right: -11px;
top: -4px; }
100% {
right: -7px;
top: -1px; }
}
<div class="link-button">
<div>
<a href="#">
Learn More
</a>
</div>
<div class="ml-5 d-flex align-items-center">
<svg width="16" height="15" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M10.5689 1.69158L20.9999 12.1226L10.5689 22.5535"
stroke="#141414" />
<rect x="0.137939" y="11.6292" width="20.7221"
height="0.986769" fill="#141414" />
</svg>
</div>
</div>.link-button {
display: flex;
justify-content: center;
align-items: center;
}
.link-button svg {
transition: all .3s ease;
}
.link-button:hover svg {
transform: translateX(10px)
}Variants
Motion helps make a UI expressive and easy to use.
Variant
Purpose
Underline
Animación simple que solo muestra un borde animado en la parte de abajo del texto.
Underline + Icon
Esta animación muestra un borde animado de izquierda a derecha y agrega una animación simple al icono del link.
Copied to clipboard