CSS Link Hover Effect For WordPress: There is a trend going nowadays Link hover effect, which has kept large and well-known bloggers on their blog or website. In other words, animate text underline. Many websites have cool effects when you hover any link inside an article.
That looks very attractive. But, Making those effects is very easy. Those effects made only with CSS when they blogs or websites in WordPress. When I did not know the coding, then this job was also very difficult for me. Now it’s easy for me like print hello world.
If you are a web designer or developer then this is easy for you also. This is a pretty good effect for attracting your visitors or reader. So, today I will share tutorial and source code of CSS hover effect.
CSS Link Hover Effect For WordPress Source Code Below:
For this animate text underline effect, you have to use some CSS codes or commands like “text-decoration” “position” “transition” & ‘border-bottom” etc. In this Source code, you have to change some major things. like, replace class whit your class and tags. A different code will run in a different theme. In my case, my articles class name is “td-post-content” & I put span tag in every <a> tag. Because <a> tag is everywhere in a page and there is a chance of code crash.
Link Text Animation Source Code
This codes preview is in feature image above.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.td-post-content /** replace with your themese class **/ span a { display: inline-block; color: #2ab1ce; font-weight: 900; text-decoration:none; border-bottom: 3px solid red; position:relative; } .td-post-content /** replace with your themese class **/ span a::after { content: ''; display: block; width: 0; height: 3px; background:#65C7DC; transition: width .3s; position:absolute; } .td-post-content /** replace with your themese class **/ span a:hover::after { width: 100%; } .td-post-content /** replace with your themese class **/ span a:hover { text-decoration:none; color:red; transition: color .5s; } |
Note: Change “td-post-content” class with your own WordPress themes class, otherwise this will not work.
Another Link Hover Effect Animation
Source Code Of This Effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.td-post-content /** replace with your theme class **/ span a { line-height: 1em; text-decoration: none; color: #333; text-transform: uppercase; font-size: 1.8em; font-family: Helvetica, Arial, sans-serif; font-weight: 700; background-size: 200% auto; background-position: -0% 0; background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #f94 50%); transition: background-position 0.5s ease-out; } .td-post-content /** replace with your themese class **/ span a:hover { background-position: -100% 0; } |
Also here you have to change “td-post-content” class with your own WordPress themes class.
If you have any problem in doing this don’t worry, you can comment below, then I will solve your problem. Any blogger never gives the code used on his website, but the first effect is that I using in this blog. You can check my links give inside articles.
Thanks For Visiting, See You Again.
mast kaam kr rhe ho bhai aap.
thank you 😂😂
Hi Bro, Good days.. 🙂 I am not a professional web developer. I am using avada theme for my site. will you please tell me how can I use these code on my site.. actually I don’t know what is my theme class and don’t know how to find it out..
Thanks in advance.. 🙂
You can use it in any WordPress theme, add the codes in custom CSS. and given link inside span.
but what about the theme class…. ?
I have n’t looked at inside in charge of a time since i have thought
it was being uninspiring, even so the last
few threads are awesome good quality well, i
think I may bring you’ll here we are at my very own day by day bloglist.
Anyone deserve the application my mate ??
It is my opinion different web page users must take this web site as being a definite device, fairly as well as excellent
easy to style, aside from the material. You’re an expert in this subject!
Thank you, Stay Connected.
Just wanna admit the is without a doubt critical , I appreciate having
your energy to publish this kind of.
Thank you, stay connected.
Appreciating the time and energy you put into your website and in depth information you
provide. It’s nice to come across a blog every once in a while that
isn’t the same unwanted rehashed material. Wonderful
read! I’ve saved your site and I’m including your RSS feeds to my
Google account.
Thank you.
This website was… how do I say it? Relevant!! Finally I have found something which
helped me. Thanks!
Hey, thank you very much, stay connected.
Howdy! I’m at work browsing your blog from my new apple
iphone! Just wanted to say I love reading through your blog and look
forward to all your posts! Carry on the excellent work!
Good web site you have here.. It’s difficult to find excellent writing
like yours nowadays. I honestly appreciate people like you!
Take care!!
Thank you very much.
Very nice article, totally what I needed.
Thank you very much, stay connected.
What a information of un-ambiguity and preserveness of valuable know-how on the topic of
unexpected emotions.
Thank you very much, Please stay connected.
Pretty nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed browsing your blog posts.
After all I will be subscribing to your feed and I hope you write again soon!
Thank you very much, I post everyday.
108552 820711hello I was quite impressed with the setup you used with this weblog. I use blogs my self so congrats. definatly adding to favorites. 936050
First off I want to say awesome blog! I had a quick question in which I’d
like to ask if you do not mind. I was interested to know how you center yourself and
clear your thoughts prior to writing. I have had a hard time clearing
my thoughts in getting my ideas out there.
I do enjoy writing however it just seems like the first 10 to 15 minutes are wasted simply just trying to figure out how to begin. Any recommendations or tips?
Cheers!
Hi there! I just wanted to ask if you ever have any issues with hackers?
My last blog (wordpress) was hacked and I ended up losing many months of hard
work due to no backup. Do you have any methods to protect against hackers?
use trusted plugins, and don’t use a cracked theme or any plugin.
It is perfect time to make some plans for the long run and it’s time to be happy.
I’ve learn this put up and if I may I wish to counsel you few attention-grabbing things
or suggestions. Maybe you could write next articles regarding
this article. I wish to learn more things approximately it!
This post is genuinely a nice one it helps new internet viewers, who
are wishing in favor of blogging.
thank you very much, stay connected.
i am not able to use this codes , i am a freshers and started web designing from 3rd october can you help to use this hover effects in my website ?
you can contact me on my instagram or username; prince__giri plz reply fast