How to Create Fill-in Button Hover Effect in Elementor

#wordpress #css #elementor #webdev

Understanding the Logic
Implementing the Logic in CSS Code
Applying the Code to Elementor Button Widget
- Applying the Code on Elementor Pro
- Applying the Code on Elementor Free
Premade Button Hover Effects

A little trick to add a premium impression to your Elementor design is by adding a button hover effect outside the default hover effects that Elementor offers. And it requires custom CSS.

In this post, I will show you how to create a button hover effect widely used by premium sites: fill-in effect.

Understanding the Logic

In Elementor, the Button widget has the class selector of .elementor-button. In the HTML structure, the selector belongs to the <a> tag. Inside the <a> tag, there are two <span> tags for the text and icon elements.

Elementor wraps the button with a <div> to make it easy for designers to style up the button.

In Elementor itself, you can add a new class to a widget. Including the Button. When you add a new class, it will be assigned to the widget wrapper, the <div>. And here is the key part.

To create a fill-in hover effect, you can use the ::before pseudo selector to add a new element(layer) before the button wrapper.

To make the ::before layer invisible on normal state, you can use the scale function on the transform property and set the value to 0.

Then, you can set the function value to 1 on the hover state to make the ::before layer be visible.

To set the slide direction, you can use transform-origin property.

Implementing the Logic in CSS Code

Here is an example of the CSS snippet for fill-in hover effect with the direction from left and back to left.

.my-hover-effect .elementor-button::before{
    content:'';
    position: absolute;
    background:#000000; /* change the fill color here */
    width:100%;
    height: 100%;
    top:0;
    left: 0;
    transform:scaleX(0);
    transform-origin: left;
    transition: transform .6s ease;
}

.my-hover-effect .elementor-button{
    overflow: hidden;
    vertical-align: middle;
    position: relative;
}

.my-hover-effect .elementor-button:hover::before{
    transform:scaleX(1);
}

.my-hover-effect .elementor-button-text, .my-hover-effect .elementor-button-icon{
    z-index: 1;
}

There are four blocks on the CSS snippet above. Here is the explanation:

Block 1

This block sets the background color of the ::before pseudo element black and sets the position to absolute. I use the scaleX function so the effect takes place in a horizontal direction. The left keyword on the transform-origin property instructs the slide effect to start from the left direction to the right direction.

To change the slide direction, you can change the left keyword to right.

Block 2

This block plays a role as a "container" for the button to hold the sliding overlays without them spilling outside the borders.

With this block, you have freedom to set the border radius of the button.

Block 3

This is where the fill-in (slide) effect takes place when you hover your cursor over the button.

Block 4

This block moves the button text and button icon to the top layer on the button (you can use a higher z-index value if you want). This makes sure that these elements (text and icon) keep visible on hover.

Applying the Code to Elementor Button Widget

Before you apply the CSS snippet to a Button widget, you can style up the button via the Elementor editor just like usual.

You can set things like background color, text color, and so on.

The CSS snippet I provided above has the CSS class of my-hover-effect. You can add this class to the CSS Classes field on the Advanced tab in the Elementor settings panel.

Applying the Code on Elementor Pro

Since Elementor Pro allows you to add custom CSS directly to a widget, you can simply paste the above code to the Custom CSS field in the editor.

Simply go to the Advanced tab and open the Custom CSS field. Paste the code here.

Applying the Code on Elementor Free

If you don't have Elementor Pro, you can use the HTML widget to add the CSS code. So, add the HTML widget to the canvas area. You can place it anywhere. Not necessarily to the same container as the Button widget.

Once the HTML widget is in place, type <style></style> and place the CSS snippet between these tags.