Adding subtle yet captivating hover effects to text can enhance the user experience on your website. In this blog post, we’ll delve into the creative world of Tailwind CSS to achieve a stylish underline on hover effect, both from left to right and right to left. Brace yourself for an engaging journey through the magic of Tailwind CSS!
Left to Right Underline on Hover
Let’s start with the left-to-right animation. The key to achieving this effect lies in the strategic use of Tailwind CSS classes. Take a look at the code snippet below:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="p-20"> <a class='group text-blue-500 transition-all duration-300 ease-in-out' href='#'> <span class='bg-left-bottom bg-gradient-to-r from-blue-500 to-blue-500 bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out'> This text gets underlined on hover from left </span> </a> </div> |
In this snippet, which you can try yourself on tailwindcss playground, we use the bg-left-bottom class to set the starting point on the left, and bg-gradient-to-r ensures a smooth gradient from left to right. The magic happens with the group-hover class, which triggers the animation from 0% to 100% on hover. Adjust the duration and ease to tailor the animation to your liking.
Right to Left Underline on Hover
Now, let’s explore the right-to-left animation. Similar to the previous example, we employ Tailwind CSS classes strategically for a seamless effect. Check the code given below and verify the working example online.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="p-20"> <a class='group text-blue-500 transition-all duration-300 ease-in-out' href='#'> <span class='bg-right-bottom bg-gradient-to-l from-blue-500 to-blue-500 bg-[length:0%_2px] bg-no-repeat group-hover:bg-[length:100%_2px] transition-all duration-500 ease-out'> This text gets underlined on hover from right </span> </a> </div> |
In this snippet written above, the bg-right-bottom class sets the starting point on the right and bg-gradient-to-l ensures a smooth gradient from right to left. The group-hover class once again adds the interactive touch, making the underline appear on hover.
Conclusion
Tailwind CSS empowers developers to create visually appealing and interactive designs with ease. The combination of gradient color classes, hover effects, and transitions showcased in this blog post allows you to add a touch of elegance to your text elements. Experiment with different colors, durations, and easings to find the perfect fit for your website. By harnessing the power of Tailwind CSS, you can make your website not only functional but also a delight to explore. Elevate your design game with these simple yet impactful underline effects!