One of our favorite modules in Divi Builder is the Button module. Why? As per our experience using a button module in other WordPress website builders, the Divi Button module feels more enjoyable and intuitive. With the Divi Button module, you can guide visitors through your website with the interactive button module by using a custom icon, creating fun hover styles, etc.
Regarding hover styles in the Divi Button module. By default, the module has no animation feature when hovering over the button. This article will show you how to change the text on hover in animation on the Divi Button module.
Steps to Change the Text on Hover in Animation on Divi Button Module
Step 1: Add the Custom CSS
First, we will add a custom CSS to the Divi Theme. On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.
Copy the CSS snippet below and paste it into the Custom CSS field.
/* CSS to change button text on hover - Slide from the Top */
.wppb-hover-text-top {
--btn-background: #000000; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.wppb-hover-text-top::after {
display: flex !important;
justify-content: center;
align-items: center;
margin: 0;
top: -100%;
opacity: 1;
left: 0;
height: 100%;
right: 0;
background: var(--btn-background);
font-family: inherit !important;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
transition: all .3s linear;
}
#page-container .et-l .et_pb_section .et_pb_button.wppb-hover-text-top:hover::after {
top: 0;
}
#page-container .et-l .et_pb_section .et_pb_button.wppb-hover-text-top {
overflow: hidden;
}
Note: Please ignore the error notice when you’ve added the CSS snippet to the available field. It is just because Divi doesn’t recognize the new CSS properties, such as --btn-background.
Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.
Step 2: Add the Button Module
Well, it’s time to move on to the next step. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with a single column, select the Button module, and insert that module into the column. Afterward, you can edit and style up your module as you prefer.
Step 3: Add a CSS Class and CSS Snippet
Alright, once you edit and style up the Button module, next we will add the CSS class and a very simple CSS snippet to the module.
- Adding CSS Class
Go to the Advanced tab -> CSS ID & Classes on your module settings. Add this class wppb-hover-text-top to the CSS Class field.
- Adding CSS Snippet
Adding a CSS snippet to the module will display text (hover state) and replace the text (normal state) on the button when hovering over the button.
On your module settings, navigate to Custom CSS and then add content:'Yourtext'; to the After field.
Note: If your text (hover state) is longer than the previous text (normal state), you must adjust the right and left padding to make space.
That’s it; if you are happy with the result (as in the GIF above), you can keep it like this and save or publish your project if you want to. But, if you want to customize it, like the background color, you can edit the values on the Custom CSS you added on the Divi Theme.
The Bottom Line
This article shows how easily you can change the text on hover in the Divi Button module without the help of any plugins. The primary reason you put the button on your website is used to users can “do something” on your website. So please apply this tutorial only if needed, and ensure your text is informative, relevant, and engaging.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.
