Hey everyone welcome back to another Tutorial on SamarJ. Hope you’re all set.
And in today’s tutorial, I’m going to show you how to add Hover effects to the links in your Post’s content with Some CSS. Well, Let’s Get Started.
Well If you like writing posts with Divi Builder (like me) then grab the code for Divi Builder. And if you like to write posts with Standard(Gutenberg, Classic) then grab code from the Standard editor box.
Hover Effect #1
For Divi Builder
.et_pb_text_inner a {
transition: background-size .4s ease !important;
background: linear-gradient(to bottom, transparent 92%, #0000ff 0) center center/0% 75% no-repeat !important;
cursor: pointer !important;
color: #0000ff!important;
}
.et_pb_text_inner a:hover {
background-size: 100% 100% !important;
}
.et_pb_text_inner a:active {
background-size: 80% 100% !important;
}
For Standard editor
.et_pb_post .entry-content a {
transition: background-size .4s ease !important;
background: linear-gradient(to bottom, transparent 92%, #0000ff 0) center center/0% 75% no-repeat !important;
cursor: pointer !important;
color: #0000ff!important;
}
.et_pb_post .entry-content a:hover {
background-size: 100% 100% !important;
}
.et_pb_post .entry-content a:active {
background-size: 80% 100% !important;
}
Preview
Hover Effect #2
For Divi Builder
.et_pb_text_inner a {
/* RESET */
text-decoration: none;
line-height: 1;
position: relative;
z-index: 0;
display: inline-block;
padding: 5px 5px;
overflow: hidden;
color: #333;
vertical-align: bottom;
transition: color .3s ease-out;
}
.et_pb_text_inner a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: translateY(calc(100% - 2px));
width: 100%;
height: 100%;
background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
transition: transform .25s ease-out;
}
.et_pb_text_inner a:hover {
color: #fff;
}
.et_pb_text_inner a:hover::before {
transform: translateY(0);
transition: transform .25s ease-out;
}
For Standard editor
.et_pb_post .entry-content a {
/* RESET */
text-decoration: none;
line-height: 1;
position: relative;
z-index: 0;
display: inline-block;
padding: 5px 5px;
overflow: hidden;
color: #333;
vertical-align: bottom;
transition: color .3s ease-out;
}
.et_pb_post .entry-content a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
transform: translateY(calc(100% - 2px));
width: 100%;
height: 100%;
background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
transition: transform .25s ease-out;
}
.et_pb_post .entry-content a:hover {
color: #fff;
}
.et_pb_post .entry-content a:hover::before {
transform: translateY(0);
transition: transform .25s ease-out;
}
Preview
Hover Effect #3
For Divi Builder
.et_pb_text_inner a {
display: inline-block;
color: #0000ff;
text-decoration: none;
}
.et_pb_text_inner a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #0000ff;
transition: width .3s;
}
.et_pb_text_inner a:hover::after {
width: 100%;
}
For Standard editor
.et_pb_post .entry-content a {
display: inline-block;
color: #0000ff;
text-decoration: none;
}
.et_pb_post .entry-content a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #0000ff;
transition: width .3s;
}
.et_pb_post .entry-content a:hover::after {
width: 100%;
}
Preview
And there you go awesome links hover effects to your post’s content with few lines of CSS. Just make sure to paste CSS in Divi > Theme Options > Custom CSS Box.
That’s it for this tutorial hope you found it helpful and if any of these effects won’t work for you just leave a comment below and I’ll try to help you as soon as possible.
Wow, a very nice and useful trick to add hover effects to links.
I’m currently using it on my blog how2wp.com.
Thank you so much, Samar, for such an awesome tutorial.
– Shakeel
Hi Shakeel.
Thanks for your comment. Glad you liked it!
Great tutorial.
Can this be done in a standard text module?
– David
Thanks 😍
Yes, please use the Divi Builder method.
hi samar! thanks thats great. i took the 1st effect, but want the line only 1px thik. how can i do it? tried already to change but i dont know much about css… i am in a divi builder. would be great if you coukd help. thanks
Hi Eli,
Glad to hear It was helpful! To change the thickness of the line, please change the 92% value to somewhere like 95% or where it looks good to you and It should do the job for you.
Hope that helps!
yes ist works!! so cool. thanks!
will it now also work in the footer menu? or do i have to change something for that also?
and also to use it the menu…
i have got the solution 😉
Hi I have been trying to get it to work in .et_pb_module a {} but it won’t work. Do you have to add the exact module css?
Thanks