Do you want to show different text when a visitor hovers over a button in Elementor? Swapping the label on hover adds an interactive touch and can lift click-through, because the button can carry a calm label at rest and a sharper call to action the moment someone reaches for it.
The Button widget in The Plus Addons for Elementor does this natively, inside the Elementor editor, with no custom code.
To check the complete feature overview documentation of The Plus Addons for Elementor Button widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — the Button widget ships in both The Plus Addons for Elementor (Free) and Pro.
- Widget to enable: Button, switched on under ThePlus Settings > Widgets.
Hover Text only appears on Button Style 4, Style 11 and Style 14. On any of the other 20 styles the field is hidden, because those styles have no second label to swap in. If you cannot see the Hover Text field, this is why.
Best Used For
- Landing pages where the hover label reveals an offer or an urgency cue — “Get Started” becoming “Claim Your Free Trial”.
- Navigation headers where the hover label says what clicking actually does.
- Portfolio and product cards where the hover label turns a name into an action prompt.
Step 1: Add the Button widget and choose a supported style
Drag the Button widget into your container. On the Content tab, open Layout and set Button Style to Style 4, Style 11 or Style 14. The widget has 23 styles in total, but only these three support a hover label.
Step 2: Set the resting label
Type the label the visitor sees before hovering into the Text field. This is the one that has to make sense on its own, since most visitors never hover.
Step 3: Set the hover label
Type the swap-in label into Hover Text. The default is Click Here. Keep it a similar length to the resting label — a hover label much longer than the original makes the button jump as it changes.
Step 4: Align the button
Alignment sits in the same Layout section and is responsive, so you can set left, center or right separately for desktop, tablet and mobile.
What It Looks Like
Settings Reference
| Setting | Where | Type | Default |
|---|---|---|---|
| Button Style | Content > Layout | Select, 23 styles | Style 1 |
| Text | Content > Layout | Text | Read More |
| Hover Text | Content > Layout | Text — Style 4, 11, 14 only | Click Here |
| Alignment | Content > Layout | Choose, responsive | Not set |
| Link | Content > Layout | URL | Empty |
Limitations
- Three styles only. Hover Text is conditional on Style 4, 11 or 14. Switching to any other style hides the field, and the hover label stops showing.
- Hover does not exist on touch devices. Phone and tablet visitors will only ever see the resting label, so never put essential information in the hover text alone.
- One hover label per button. There is no per-device hover text.
- It swaps text, not layout. If the two labels differ a lot in length the button resizes mid-hover; matching their lengths avoids that.
Troubleshooting
I cannot see the Hover Text field
Your Button Style is not one of the three that support it. Set it to Style 4, Style 11 or Style 14 and the field appears immediately.
The text swaps but the button jumps
The two labels are different lengths. Either match them more closely, or give the button a fixed width via the container so its size does not depend on the label.
Nothing happens on mobile
This is expected. Touch devices have no hover state, so the resting label is all a phone visitor sees. Make sure that label works on its own.
Related Docs
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.
- Button widget: settings overview — every control in the widget.
- Add tooltip text to an Elementor button — another way to say more on hover.
- Add a button hover animation in Elementor
