How can I change the text on a button to display a phone number on hover in Webflow without using images?
TL;DR
- Add two text blocks inside a button (default label and phone number), each with its own class.
- Use Webflow's Hover Interactions to toggle visibility: show the phone number and hide the label on hover, and reverse on hover out.
To display a phone number on button hover in Webflow, you can use text swaps with hover states—no images or code required.
1. Add and Structure Your Button
- Drag a Button onto your canvas.
- Delete the default text inside the button.
- Add a Text Block and place it inside the button (replacing the original button label).
- Duplicate the Text Block (Ctrl/Cmd + C, Ctrl/Cmd + V) so you now have two inside the button.
2. Style the Text Blocks
- Set the first Text Block (e.g., "Call Us") as the default text.
- Set the second Text Block (e.g., "+1 (555) 123-4567") as the hover text.
- Give each Text Block a distinct class, such as
button-default-textandbutton-hover-text. - Set the hover text block to Display: None in the default state.
3. Add Hover Interactions
- Select the Button, go to the Interactions panel (lightning bolt icon), and add a Hover interaction.
- On Hover In:
- Hide the default text block (Set display: none).
- Show the hover text block (Set display: block or flex).
- On Hover Out:
- Show the default text block.
- Hide the hover text block.
4. Adjust Positioning and Transitions (Optional)
- To ensure a smooth transition:
- Add fade-in and fade-out animations in each step.
- Keep button dimensions fixed so layout doesn’t shift.
Summary
Create two text elements inside the button (label and phone number), set one to show on hover using Webflow's Interactions panel, and hide/show them accordingly. This approach uses native Webflow tools—no code or images needed.