• a

NEW & POPULAR DIVI CHILD THEMES

Supreme Store

Molti

Molti Ecommerce

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

NEW & POPULAR DIVI CHILD THEMES

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti

Multipurpose Business Child Theme for Divi.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

How to Add Stunning Hover Effects to Links in Posts in Divi

Samar Jamil

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.

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!
🆕 Introducing Molti LMS! The Ultimate LearnDash Child Theme for Divi. 30% off Launch Discount with code "LMS30".
😍 New Divi Child Theme Release: Molti LMS