The evaluation in web designing has opened many doors for designers to develop creative stuff. The underline/border draw animation is one of this creative stuff. The idea of drawing underlines animation came from the text-decoration property that is used for hyperlinks. So, I decided to make a drawing link underline hover animation using CSS.
Basically, this animation is not only limited to hyperlinks. The doors are open to experiments with it even with the heading, images, and plain text. I created four variations of this underline animation including left to right and from center to the corners of the link/text. You can view a quick preview of these animations in the following video:
Video Preview
Similarly, you can browse the demo page to feel the underline animation in action. Don’t like the underline format? don’t worry! the thickness and background color can be customized according to your needs. Even, you can set the linear-gradient background for the underline. You can generate awesome gradient background by visiting the demo page of this post.
OK! let’s get started with HTML structure to create underline hover animations.
The HTML Structure
In HTML, create a div element with an id "links-container" and place your links inside it wrapping each link with a div class "link". Similarly, give the class name to the hyperlink "hover".
<div id="links-container">
<div class="link">
<a href="#1" class="hover hover-1">This underline goes left to right</a>
</div>
<div class="link">
<a href="#2" class="hover hover-2">This underline goes right to left</a>
</div>
<div class="link">
<a href="#3" class="hover hover-3">This underline goes outwards</a>
</div>
<div class="link">
<a href="#4" class="hover hover-4">This underline goes inwards</a>
</div>
</div>
Whether you want to implement one hover style or all of the above, create the hyperlink structure anywhere in your HTML as above described.
Link Underline Hover Animation CSS Styles
The “links-container” is the id of the container, target this id in CSS and display it as flex. Set the flex-flow as a column and define the hundred percent max-width. Likewise, define the background color, opacity, padding, and margin property as mentioned below:
#links-container {
display: flex;
flex-flow: column;
max-width: 100%;
width: 960px;
background-color: white;
opacity: 0.95;
padding: 15px 30px;
margin: 0 auto 30px;
}
After that, select the "link" class and define the display property as flex. Set the flex-flow as a row with nowrap value. The link alignment is optional, you can leave this property. Anyhow, define the margin property with a 0 0 45px value to leave some space at the bottom of the link.
#links-container .link {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin: 0 0 45px;
}
#links-container .link a{
color: #333;
}
The "hover" class is the child element/hyperlink of the link container. You can define your own CSS styles for your links using this class. If you want to display the links as a demo page, define the font size as 36px, align the text center, and define margin and padding properties. Here, the important property is the position that you need to have relative. Similarly, the transition property is also necessary with at least 0.2s transition duration.
If you use your own styles for the link, make sure you have defined transition (with "all 0.2s ease-in-out" value) and position (with relative value) properties. Similarly, define hover style using after pseudo selector that will draw a border (actually a div element with background) at the bottom of link.
#links-container .link .hover {
font-size: 36px;
text-align: center;
margin: 0 auto;
padding: 0;
transition: all 0.2s ease-in-out;
position: relative;
}
#links-container .link .hover:before, #links-container .link .hover:after {
content: "";
position: absolute;
bottom: -10px;
width: 0px;
height: 5px;
margin: 5px 0 0;
transition: all 0.2s ease-in-out;
transition-duration: 0.75s;
opacity: 0;
background-color: #e69500; /* Set custom color */
}
If you want to set the gradient background color, set the custom color value in the above CSS snippet.
Finally, specify CSS styles for the “hover-1, hover-2, hover-3, and hover-4” classes as described below. This will make four different types of underline hover animation.
#links-container .link .hover.hover-1:before, #links-container .link .hover.hover-1:after {
left: 0;
}
#links-container .link .hover.hover-2:before, #links-container .link .hover.hover-2:after {
right: 0;
}
#links-container .link .hover.hover-3:before {
left: 50%;
}
#links-container .link .hover.hover-3:after {
right: 50%;
}
#links-container .link .hover.hover-4:before {
left: 0;
}
#links-container .link .hover.hover-4:after {
right: 0;
}
#links-container .link:hover {
cursor: pointer;
}
#links-container .link:hover .hover:before, #links-container .link:hover .hover:after {
width: 100%;
opacity: 1;
}
#links-container .link:hover .hover.hover-3:before, #links-container .link:hover .hover.hover-3:after, #links-container .link:hover .hover.hover-4:before, #links-container .link:hover .hover.hover-4:after {
width: 50%;
}
That’s all! I hope, you have successfully created an underline hover animation using CSS. If you have any suggestions or questions, please let me know by comment below. Happy Coding 😀