How can I change the text on a button to display a phone number on hover in Webflow without using images?
TL;DR
- Add a button with default text (e.g., "Call Us").
- Wrap the default text in a span and add a second span with the phone number, setting its opacity to 0.
- Create a hover interaction to fade out the default text and reveal the phone number.
- Apply smooth easing and a short duration for a natural transition.
You can achieve this effect using Webflow's built-in interactions. Follow these steps to change the button text to a phone number on hover without using images.
1. Add the Button and Text Elements
- Drag a Button element onto your Webflow canvas.
- Set the default text for the button (e.g., “Call Us”).
2. Add a Span for the Phone Number
- Double-click the button text to enter text-editing mode.
- Wrap the default text in a span: Select the text, click the paintbrush icon (in the Styles panel), and choose Wrap with Span.
- Add a second span (inside the button) and type the phone number (e.g., “+1-234-567-8901”).
- Style the phone number span: Set its opacity to 0 in the Styles panel so it’s hidden by default.
3. Create the Hover Interaction
- Go to the Interactions panel and create a new Hover trigger for the button.
- On Hover In:
- Set the default text span's opacity to 0 and move it up slightly (e.g., -10px Y-axis).
- Set the phone number span’s opacity to 100% and move it to its original position.
- On Hover Out:
- Reverse the interaction to restore the default text.
4. Adjust Timing and Easing
- Choose a smooth easing effect (e.g., “Ease In-Out”) for a natural transition.
- Set a duration (e.g., 0.3s) for a quick but smooth effect.
Summary
You can swap button text for a phone number on hover using spans and Webflow's interactions. This method ensures smooth transitions and avoids needing additional images or code.