Have you ever wondered how to add beautiful Link Underline Animation with simple CSS?
Do you have any of below questions?
- How to Animating Link Underlines
- How to Animated Multiline Link Underlines with CSS
- 4 CSS Snippets for Creating Stunning Animated Underline
- How to Animating Links?
Demo – 1. From inside to out
Check this out.
Here is a code:
<p class="crunchify-underline-demo">
<a href="" class="crunchify-link-moveout">Hello from Crunchify.com</a>
</p>
Just add below to your WordPress theme’s css file:
/* ------------ Demo-1. Beautify Link Underline: middle to outwards -------------- */
a.crunchify-link-moveout {
position: relative;
}
a.crunchify-link-moveout:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
transform: scaleX(0);
transition: all 0.4s ease-in-out;
}
a.crunchify-link-moveout:hover:before {
visibility: visible;
transform: scaleX(1);
}
Demo – 2. From Left to Right
Check this out.
Here is a code:
<p class="crunchify-underline-demo">
<a href="" class="crunchify-link-toright">Hello from Crunchify.com</a>
</p>
Add below code to your theme’s CSS file.
/* ------------ Demo-2. Beautify Link Underline: From Left to Right -------------- */
a.crunchify-link-toright {
position: relative;
}
a.crunchify-link-toright:before {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.crunchify-link-toright:hover:before {
visibility: visible;
width: 100%;
}
Demo – 3. Left to Right
Here is a code:
<p class="crunchify-underline-demo">
<a href="" class="crunchify-link-toleft">Hello from Crunchify.com</a>
</p>
Add below code to your theme’s CSS file.
/* ------------ Demo-3. Beautify Link Underline: From Right to Left -------------- */
a.crunchify-link-toleft {
position: relative;
}
a.crunchify-link-toleft:before {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
right: 0;
background-color: #fff;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.crunchify-link-toleft:hover:before {
visibility: visible;
width: 100%;
}
Demo – 4. From Bottom Top
Here is a code:
<p class="crunchify-underline-demo">
<a href="" class="crunchify-link-bottomtop">Hello from Crunchify.com</a>
</p>
Add below code to your theme’s CSS file.
/* ------------ Demo-4. Beautify Link Underline: From Bottom to Top -------------- */
a.crunchify-link-bottomtop {
position: relative;
}
a.crunchify-link-bottomtop:before {
content: "";
position: absolute;
width: 100%;
height: 0;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.crunchify-link-bottomtop:hover:before {
visibility: visible;
height: 3px;
}
I hope you find this code helpful and let us know if you face any issue running this code.
The post How to add beautiful Link Underline Animation with simple CSS? (4 different ways) appeared first on Crunchify.
0 Commentaires