We can create some cool hover effects for links using custom CSS code. In this article, we will use the Text module and add the CSS code for any links inside it.
Add at least one link to a Text module
Edit the Text module settings and go to the Advanced Tab,
Locate CSS ID & Classes, and enter
divi-tm-fancy-hover-effectas a custom CSS class. This class will be utilized in the CSS code later on.
Finally, proceed to Divi > Theme Options > General Tab > Custom CSS, and input the provided CSS code:
.divi-tm-fancy-hover-effect a {
background-image: linear-gradient(120deg, #6c2fb9 0%, #6c2fb9 100%);
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: 0 100%;
transition: background-size 0.25s ease-in-out;
color: inherit !important;
font-weight: bold;
}
/*Animate the line into a background on hover*/
.divi-tm-fancy-hover-effect a:hover {
background-size: 100% 100%;
color: #ffffff !important;
transition: ease all .3s;
}
Note: The same CSS code can be used for any text-based module. All you need to do is to make sure that other text-based modules are using the same CSS class divi-tm-fancy-hover-effect
