Using Elementor as your website builder has many benefits and advantages. No limitation to customization for each widget is one of the benefits that you get. This article will show you how to remove the box shadow on the Elementor button on hover state.
We are sure you’re already familiar with the hover feature on Elementor. You can find this feature in many Elementor widgets, for example, the Button widget. But, we found a problem here, let’s say you added a box shadow effect to your button, and you want the box shadow disappears when you hover over it; by default, Elementor doesn’t have the option to do that. Well, as we mentioned earlier, we will show you how to do that.
Steps to Remove the Box Shadow on Elementor Button on Hover State
Step 1: Add a Button Widget
Go to your Elementor editor, and we will start everything from scratch, so create a section with a single column. Afterward, 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, you can edit and style up the widget to your preference.
Note: Don’t forget to add a box shadow effect to your button. On the widget settings, go to the Style tab, then navigate to the Box Shadow option.
Step 2: Add the CSS Snippet
Once you’ve edited and styled the Button widget, next, we will remove the box shadow effect that you’ve added to your button on the hover state by adding the simple CSS snippet. On the Button widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.
selector .elementor-button:hover {
box-shadow: none!important;
}
The Code Explanation:
The code above selects the Button widget using the selector .elementor-button selector, and then the hover effect applies by adding the pseudo-selector :hover .You can check the complete list of Elementor widget selectors here.
The style of the Button widget on the hover state is defined between the curly brackets (Properties and Values). We set the box shadow to be removed when hovering over the button by adding a property box-shadow and the value none , and then we add the rule !important . This rule will override all previous styling for a specific property (box-shadow) on the button widget when it’s in a solid state.
That’s it. As you can see from the GIF above, the box shadow on the Button widget disappears on hover state. Don’t forget to save your project if you want to.
The Bottom Line
With Elementor Custom CSS, you can add CSS to every section, column, or widget. You can easily remove the box shadow on the hover state in this case.
However, Custom CSS is only accessible on Elementor Pro. But don’t worry; we have a solution for you if you’re currently using the free version of Elementor but want to add Custom CSS to your Elementor. Please click the link if you want to learn how to add Custom CSS on Elementor free version, and you can still remove the box shadow on the hover state, even in the free version of Elementor.
