Welcome to ThemesGadget. This post will learn how to make an animated link hover effect with underline, Interact link on hover, link hover effects CSS, and link hover animation CSS. Just follow our steps carefully to avoid any errors.
Introduction To Animated Link Hover Effect
An animated link hover effect with an underline is a simple yet very effective way of making your link look more attractive and unique by making your website or blog more visually appealing.
This method involves a short animation that shows the underline as waves. The animation is activated when a mouse hovers over the desired area with a blue “Underline” appearing on the screen.
Suppose you want to make your animated link hover effect with underline in blogger, WordPress Theme, or any other type of web page. Then This is a pretty good design for bloggers and designers who want to add more interest and meaning to the links.
What Is Animated Link Hover Effect?
An animated link hover effect is a visual effect that can be added to a blog post, media post, or any web page. In an article on web design, we discuss how useful it is for SEO and how it helps with click-through rates.
A link hover text is used in two ways: to indicate where a link should be clicked upon and where the user should click to view the content. to know more about hyperlinks, go through the link: Wikipedia Page(Link)
Link hovers text is often associated with banner ads, social media posts, and text links. However, they are other uses—leaving links within your blog post and using them as navigation buttons on your website.
The Reason To Use Animated Link Hover Effect
Link hover text is a very popular and important feature on blog sites. It makes the user click on the link, and then it will be displayed with an animated underline. But not all users like this feature because they prefer to see the link in normal text form.
Well, what if you make it to show the link in different forms? This can help your readers understand that the post is about something other than just a cat or dog picture.
You can use an animated link hover effect with an underline for your links so that when the user hovers over your site’s links for a longer time, it will show an animated underline.
If you want to see the animation (Hover) Demo, you should use the below button:
How To Make An Animated Link Hover Effect In Blogger?
This article will take you through step-by-step instructions on how you can create a link hover text with an animated underline for your blog. It’s not difficult to use this effect.
To make an animated link hover effect for your blogger site, you need to add HTML, CSS, and JavaScript codes for it. These codes have to add in 3 steps. We will add HTML code in the 1st step, CSS in 2nd, and JavaScript in the last step.
Step 1 - Adding HTML (Link Hover HTML)
<p align="center" class="magic-hover">Hover <a class="link" href="">The Link</a> For Magic - Unplug</p>
Step 2 - Adding CSS (Link Hover CSS)
These CSS Codes are in a Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool. And if you like to change the color of the underline, you can change it from here, --line:#555eed; And I have also highlighted this code
This GENERAL STYLING CSS highlighted with red is unnecessary if you add this HTML to your blog post or blog page. If you want you can leave it.
<style type="text/css">
/* GENERAL STYLING */
*{margin:0; padding: 0;box-sizing: border-box;}
body{font-family: 'noto sans', sans-serif;}
.magic-hover{margin-top: 50px !important;}
/* GENERAL STYLING */
:root{--text:#2B3044;--line:#555eed;--font-size:16px;--duration:.44s;--duration-line:.84s;}.magic-hover{font-size:18px;margin:0;color:var(--text);font-size:var(--font-size);line-height:var(--font-size);zoom:1.5;}.magic-hover .link{display:inline-block;position:relative;text-decoration:none;color:inherit;}.magic-hover .link div{overflow:hidden;}.magic-hover .link div:first-child{display:flex;overflow:hidden;text-shadow:0 var(--font-size) 0 var(--text);}.magic-hover .link div:last-child{position:absolute;pointer-events:none;right:0;left:0;bottom:-3px;height:5px;}.magic-hover .link div:last-child svg{display:block;position:absolute;right:0;top:0;width:300%;height:5px;fill:none;stroke:var(--line);stroke-width:1.5px;stroke-linecap:round;stroke-dasharray:63.5px 128px;stroke-dashoffset:var(--line-offset,190.25px);transform:translateX(var(--line-x)) translateZ(0);transition:transform var(--line-d,0s),stroke-dashoffset var(--line-d,0s);}.magic-hover .link div span{display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-style:normal;transition:transform var(--duration) ease;transform:translateY(var(--m,0));}.magic-hover .link div span:nth-child(1){transition-delay:0.05s;}.magic-hover .link div span:nth-child(2){transition-delay:0.1s;}.magic-hover .link div span:nth-child(3){transition-delay:0.15s;}.magic-hover .link div span:nth-child(4){transition-delay:0.2s;}.magic-hover .link div span:nth-child(5){transition-delay:0.25s;}.magic-hover .link div span:nth-child(6){transition-delay:0.3s;}.magic-hover .link div span:nth-child(7){transition-delay:0.35s;}.magic-hover .link div span:nth-child(8){transition-delay:0.4s;}.magic-hover .link div span:nth-child(9){transition-delay:0.45s;}.magic-hover .link div span:nth-child(10){transition-delay:0.5s;}.magic-hover .link div span:nth-child(11){transition-delay:0.55s;}.magic-hover .link:hover{--m:calc(var(--font-size) * -1);--line-d:var(--duration-line);--line-x:65.66%;--line-offset:63.5px;}
</style>
Step 3 - Adding JavaScript
These JavaScript codes are in a compressed format. If you want to beautify, you can use our tool by Following this Link – JavaScript Beautifier Tool.
<script>
document.querySelectorAll('.link').forEach(link => {
link.innerHTML = '<div class="link-item"><span>' + link.textContent.trim().split('').join('</span><span>') + '</span></div>'
link.querySelectorAll('span').forEach(s => s.innerHTML = s.textContent == ' ' ? ' ' : s.textContent)
link.insertAdjacentHTML('beforeend', '<div><svg preserveAspectRatio="none" viewBox="0 0 192 5"><path d="M191.246 4H129C129 4 127.781 4.00674 127 4C114.767 3.89447 108.233 1 96 1C83.7669 1 77.2327 3.89447 65 4C64.219 4.00674 63 4 63 4H0.751923" /></svg></div>')
});
</script>
Conclusion
Without an animated link hover effect with an underline, a link may look like an empty box with no meaning. The best way to enhance a link is to add animation. The above tutorials are best about adding an animated underline to your blogger.
By default, any link on your blog will have a plain text version of the link’s URL. You can add animation to the URL by following this article.
I hope that this article helped you make an animated link hover effect with an underline for your blogger website. Let us know if you have any other questions regarding the link hover text effect. You can get in touch with us via our contact form or telegram.