Subscribe to my newsletter and never miss my upcoming articles Show The little things matter sometimes. You never know how satisfied your website visitors or clients maybe with the minor adjustments you make, like adding a Hover Underline Animation to your website. In this tutorial, you'll learn how to improve your website links from this (an HTML link without the hover underline animation): To this (an HTML link with the hover underline animation): You can check out the Codepen here. The HTML PartLet's say, you have this HTML anchor tag below to navigate a user to another webpage:
By default, the code above will produce this: Let's add some CSS styles to them:
From the CSS code above:
Our anchor link should now look something like this: Step 1 - Adding An Underline To The Anchor Tag TextIn order to achieve the underline effect, we'll make use of the Update your CSS with the code below:
From the CSS code above:
Our anchor tag should look something like this: Step 2 - Hidding The Text Underline By DefaultSince we only want the anchor tag to be underlined when hovered, we can add the transform
Setting the Now we have the underline hidden by default, as shown below: Step 3 - Displaying The Text Underline On Mouse HoverThe final step is to display the text underline on the mouse hover and here's what the code looks like:
Now, the underline should be visible on mouse hover like this: You'll notice that the underline animation only moves in one direction (came from the bottom-right and exits through the bottom-right), this is from the We can improve the hover underline animation by adding the opposite value of the initial
This will make the underline come from the bottom left and then exit through the bottom right, as shown below: You can find the complete code here Wrapping Up 🏁In this tutorial, you've learned how to add a hover underline animation to improve the anchor tags and texts on your website. Useful Links
I'm glad you made it to the end of this article. If you enjoyed and learned something new from this article, I'll like to connect with you. Let's connect on:
See you in the next article. Bye Bye 🙋♂️ If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏. |