Add Some More Hover Effects to your Elementor Buttons

Our Blogs

Elementor button widget is one of the most used widget. we use it in simply any website or page we design. The button widget have some hover effects that you can use. But For those who want some more the can customize the hover effects with custom css. But for that you need to know some basic on css. But If you are not interested to learn css or just don’t wanna write css, you can add some awesome hover effects by just copy & pasting. We created some cool hover effects for Elementor Buttons. you can use it for Free. So, besically you need to have elementor Pro beacause we will use custom css so make sure you already have it and also If you want you can follow the youtube tutorial for better understanding. You can find the video in the below.

STEP-1. Remove bg

First of all you need to clear the background of the button and you can do it easily by clicking the background and you will see a option to clear background. Don’t worry if you want to add a background color. We will show you how to add a background color also later in this blog.

STEP-2. Copy & paste the Custom Css

Now you need to copy the ‘css’ of the effect’s which you wanna have from the below. You can see that we have created some hover effects and also beside them you can see the preview of the effects. So Copy the effect’s css and paste in your buttons custom css.

Effect-1. From The left


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative; 
 z-index: 1;
 background: var(--button-bg-color);
}
selector a.elementor-button:before{
    background: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:hover:before{
    width: 100%;
}

Effect-2. From The Right


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}

selector a.elementor-button{
 position: relative;  
 z-index: 1; 
 background: var(--button-bg-color);
}
selector a.elementor-button:before{
    background: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:hover:before{
    width: 100%;
}

Effect-3. From The Top


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative;  
 z-index: 1; 
 background: var(--button-bg-color);
}
selector a.elementor-button:before{
    background-color: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 0;
    width: 100%;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:hover:before{
    height: 100%;
}

Effect-4. From The Bottom


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative;
 z-index: 1;   
 background: var(--button-bg-color);
}
selector a.elementor-button:before{
    background-color: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    height: 0;
    width: 100%;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:hover:before{
    height: 100%;
}

Effect-5. From The Left & Right


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative;
 z-index: 1;   
 background: var(--button-bg-color);
}
selector a.elementor-button:before,
selector a.elementor-button:after{
    background-color: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    height: 50%;
    width: 0;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:before{
    top: 0;
    right: 0;
}
selector a.elementor-button:after{
    left: 0;
    bottom: 0;
}
selector a.elementor-button:hover:before,selector a.elementor-button:hover:after{
    width: 100%;
}

Effect-6. From The Left and Right 2


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative; 
 z-index: 1;  
 background: var(--button-bg-color);
}
selector a.elementor-button:before,
selector a.elementor-button:after{
    background: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    height: 100%;
    width: 0;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:before{
    top: 0;
    right: 0;
}
selector a.elementor-button:after{
    left: 0;
    bottom: 0;
}
selector a.elementor-button:hover:before,selector a.elementor-button:hover:after{
    width: 50%;
}

Effect-7. From The Top & Bottom


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative;
 z-index: 1;   
 background: var(--button-bg-color);
}
selector a.elementor-button:before,
selector a.elementor-button:after{
    background: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    height: 0;
    width: 50%;
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:before{
    top: 0;
    right: 0;
}
selector a.elementor-button:after{
    left: 0;
    bottom: 0;
}
selector a.elementor-button:hover:before,selector a.elementor-button:hover:after{
    height: 100%;
}

Effect-8. With 4 Boxes


selector{
    --button-bg-color: transparent;
    --button-hover-bg-color: red;
}
selector a.elementor-button{
 position: relative;
 z-index: 1;  
 background: var(--button-bg-color);
}
selector a.elementor-button:before,
selector a.elementor-button:after,selector a.elementor-button>span:before,
selector a.elementor-button>span:after{
    background: var(--button-hover-bg-color);
    position: absolute;
    content: '';
    height: 0;
    width: calc(100% / 4);
    transition: .5s ease-in-out all;
    z-index: -1;
}
selector a.elementor-button:before{
    top: 0;
    left: 0%;
}
selector a.elementor-button>span:before{
    bottom: 0;
    left: 25%;
}
selector a.elementor-button>span:after{
    top: 0;
    left: 50%;
}
selector a.elementor-button:after{
    bottom: 0;
    left: 75%;
}
selector a.elementor-button:hover:before,selector a.elementor-button:hover:after,selector a.elementor-button:hover>span:before,selector a.elementor-button:hover>span:after{
    height: 100%;
}

STEP-3. Set bg Color

In this step, we will set the background color or hover-background color. For that, you need to set the color in the custom CSS. You can notice that there are two variables set in the top of the code that you copied. First One is, button background color (–button-bg-color) and second one is Button hover background-color (–button-hover-bg-color). By default, you can see that the –button-bg-color is transparent and –button-hover-bg-color is red. You can edit and set your color code there. For the text color or anything else you can use elementor widget controler.

If you wanna know how they work??

See the Pen Slide-in Button Hover Effect by Web Cifar (@Web_Cifar) on CodePen.

Don’t forget to see our blogs and assets where you can find all free stuff that can help your website to become more beautiful and professional.

Sharing is caring!

Liked This Article?

Subscribe To Our Newsletter. So You will never Miss Another Update.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares