CSS Link Hover Animation obtains a website to vitality and charms the attention of the user. One of the most standard animations on websites is hover effects animation. Usually, their objective is to highlight meaningful web page areas or elements. Hover effects can also add or highlight interactive elements of a page.
In this article, you’ll learn how you can add an animated link hover effect to your website. Here, we are going to use some CSS code to achieve that.
Read Also: Animated Progress bar HTML CSS
Add CSS Link Hover Animation
When opting to add hover effects, have a look at the CSS link hover effects in the below example. It has many benefits over its non-CSS counterparts. The results that do not use CSS are normally more complex and their fatness affects the website interpretation.
CSS link hover effects animation, on the other hand, is simpler, more lightweight, and loads quickly. No wonder these animations are now favored by most web developers.
Here, I have displayed How to add underlined hover effects animation to links to your website.
Example:
<a href="#">Soft CodeOn</a>
<style>
a{
display:inline-block;
position:relative;
color:#000;
text-decoration:none;
font-size: 30px;
}
a:after
{
content:'';
position:absolute;
width:100%;
transform:scaleX(0);
height:5px;
bottom:0;
left:0;
background-color:blue;
transform-origin:bottom left;
transition:transform .25s ease-out
}
a:hover:after{transform:scaleX(1);transform-origin:bottom right}</style>Add Underline link hover effects anywhere. To add the link hover effect just need to copy the CSS code and paste it to your website page or in the <body> tag to show the hover effect. CodePen Demo