Do you want to show different text when a visitor hovers over a button in Elementor? Changing the button text on hover adds an interactive element to your page and can increase click-through rates by giving visitors a clearer call to action.
The Button widget in The Plus Addons for Elementor lets you display alternate hover text directly inside the Elementor editor, without any custom code.
To check the complete feature overview documentation of The Plus Addons for Elementor Button widget, click here.
Best Used For:
- Landing pages where hover text reveals an offer or urgency cue, such as changing “Get Started” to “Claim Your Free Trial”
- Navigation headers where hover text tells the visitor what clicking the button does
- Portfolio and product pages where the hover label reveals a specific action prompt
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
To do this, add the Button widget to the page and follow the steps –
1. Select the appropriate style from the Button Style dropdown under the Layout tab.
Note: Only with Style 4, Style 11 and Style 14 you can change text on hover.
2. From the Alignment section, align the button for the device size you are targeting.
3. In the Text field, add the button label that appears in its default state.
4. In the Hover Text field, add the text you want to display when a visitor hovers over the button. Use this when you want the button to reveal a different call to action on hover, such as changing “Learn More” to “Start Free”.
This is how you can change the button text on hover in Elementor for free.
Also, check out how to add a continuous animation effect to an Elementor button.
Learn how to change text shadow on hover for an extra touch!
