How To Add An Animated Link Hover Effect In Blogger & WordPress

In this article, I will show you how you can add an animated link hover effect to your Blogger and WordPress website. Here, we are going to use some CSS code to achieve that.

By the way, Link hover effect will helps draw user attention to the link and looks pretty cool and professional.

So, to Add the animation, watch the step by step video Added below.

Here, I have shown How to add underline hover effects to links in Both Blogger and WordPress. You can see the demo of this effect in Our Blogger website.

Add Underline link Hover Effects in Blogger & WordPress

To add the link hover effect in Blogger, log in to your Dashboard and click on the theme menu.

Now in the drop down menu backup your theme code and than click on “Edit HTML” option.

Now you need to paste the below CSS code above the </style> tag or ]]></b:skin> tag.

a{display:inline-block;position:relative;color:#c44341;text-decoration:none}
a:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;background-color:#c44341;transform-origin:bottom right;transition:transform .25s ease-out}
a:hover:after{transform:scaleX(1);transform-origin:bottom left}

Or paste it above the </body> tag by warping the CSS code with style tag.

Here, you need to add the class of your post body section to target the links inside the post and exclude other links on your website. I have shown how to get the CSS class using the inspect element of chrome.

Some common Post Body class in Blogger are .postBody , .post-body , .entry-content like this.

To add the link hover effect, just copy the above code, add the post body class of WordPress and paste it in the additional CSS section.

If you have any doubts, feel free to ask me in the comment section. For more such Tutorials, Subscribe to our YouTube Channel and Follow me on Twitter.