How to Change the Button Text on Hover in Elementor

As a web designer, creating practical navigation is a must. Navigation contributes to user experience; it helps you allow users to access the information they want as quickly as possible by presenting an enjoyable, intuitive layout while increasing ease of use. Adding a hover effect on your website could help your users navigate and interact with your website.

This article will show you how to change the button text on hover in Elementor. It might look like a gimmick, but if you apply it correctly, we are pretty sure it’s handy for your site.

Steps to Change the Button Text on Hover In Elementor

Before we start the tutorial, we want to inform you this tutorial will work with Elementor Custom CSS. The Custom CSS feature is only accessible on Elementor Pro; ensure you’ve upgraded to the pro version.

Step 1: Add the Button Widget

Go to your Elementor editor. You can create new content or select existing content. In this example, we will create a new page.

On your WordPress dashboard, go to Pages -> Add New. Give a title, then click the Edit with Elementor button that will bring you to the Elemento editor.

Select the Button widget from the widget panel and then drag and drop it into the canvas area.

Once you’ve added the button widget to the canvas area, you can edit and style up the Button widget with your preference.

Next, we will apply some changes to the Button widget. On the Button widget settings, go to the Advanced tab -> Layout.

• Width: Set to Custom
• Position: Set to Absolute
• Horizontal and Vertical Offset: Adjust the Offsets as you prefer
• CSS Class: Add a CSS Class buy, or you can add any class name

Next, you need to duplicate your button widget.

Once the button is duplicated, the second button is on top of the first button automatically. Open the Navigator to make your job easier.

Next, select the second button; afterward, edit and style up the second button with your preference. Make the second button look different from the first one. Such as text, background color, etc.

Once you edit and style up the second button, navigate to the Advanced tab and change the CSS class name. In this example, we change the class name to yes.

Step 2: Add the Custom CSS

Now it’s time to add the simple CSS snippet to each Button widget. Go to the Advanced tab, then navigate to Custom CSS.

First Button

Please copy the simple CSS snippet below and paste it into the Custom CSS field.

.elementor-widget-button.buy{
    opacity: 1;
}

.elementor-widget-button:hover.buy{
    opacity: 0;
}

The Code explanation:

The code above selects the class selector of the Button widget using the .elementor-widget-button and selects the CSS Class name by adding .buy, then the hover effect applies by adding the pseudo-element selector :hover. You can check the complete list of Elementor widget selectors here. The style of the button with and without hover is defined between the curly brackets.

Note: The CSS Class name you add to the CSS snippet is based on the class name you added on the first button.

Second Button

Please copy the simple CSS snippet below and paste it into the Custom CSS field.

.elementor-widget-button.yes{
    opacity: 0;
}

.elementor-widget-button:hover.yes{
    opacity: 1;
}

The Code Explanation:

The code above selects the class selector of the Button widget using the .elementor-widget-button and selects the CSS Class name by adding .yes, then the hover effect applies by adding the pseudo-element selector :hover. You can check the complete list of Elementor widget selectors here. The style of the button with and without hover is defined between the curly brackets.

Note: The CSS Class name you add to the CSS snippet is based on the class name you added on the second button.

That’s it. As you can see from the GIF above, when you already have the CSS code for each button widget, the text changes when you hover over it. Don’t forget to save or publish your project if you want to.

The Bottom Line

The value of user experience that hovers can provide is allowing users to get extra information without clicking away from where they are on your site. In this case, you can input additional information only on one button. Users also have possibilities on a website before they commit to a specific action. In this tutorial, we apply the feature (button text changes on hover) to confirm the user’s age before buying the product.

We hope this tutorial is helpful for you, and applying it depends on your website’s needs.