How To Take A Custom Button Hover Effect In Elementor

So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!

Alternatively

You can download the complete template here

The Following code goes into the button widget under the Custom CSS option:

				
					.elementor-widget-button .elementor-button-wrapper {
    --btn-width: 180px;
    --btn-height: 50px;
    --left-gradient: #F803F8;
    --right-gradient: #03F2FD;
    margin-top:5px;
}

.elementor-widget-button .elementor-button {
    position: relative;
    width: var(--btn-width);
    height: var(--btn-height);
    padding: 0 !important;
     
    border: none !important;
}

.elementor-widget-button .elementor-button:before,
.elementor-widget-button .elementor-button:after {
    content: '';
    position: absolute;
    inset: 1px; /* Start slightly inset */
    transition: 0.5s;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--left-gradient), transparent, transparent, var(--right-gradient));
}

.elementor-widget-button .elementor-button:hover:before,
.elementor-widget-button .elementor-button:hover:after {
    inset: -3px;
}

.elementor-widget-button .elementor-button:hover:after {
    filter: blur(10px);
}

.elementor-button-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Inherit background set in Elementor */
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    overflow: hidden;
}

/* Glass Shine Effect */
.elementor-button-content-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.06);
    transform: skewX(-25deg);
    transition: 0.5s;
    z-index: 1;
}

.elementor-button-content-wrapper:hover:before {
    left: 50%;
}

/* Ensure button text stays on top */
.elementor-button-text {
    position: relative;
    z-index: 2;
}

Other Articles

Transform Your Website with This FIRST EVER Animated Inner Border Effect In Elementor | WordPress Tutorial

https://youtu.be/bfAqAQnJO7E So if you follow along in the video, I refer to this blog post for you to enter code ...

Ignite Your Website with a Fiery Animated Cursor Trail Effect in Elementor | WordPress Tutorial

https://youtu.be/sLSE2L0zKZg So if you follow along in the video, I refer to this blog post for you to enter code ...

Create a Mesmerizing Animated Custom Cursor in Elementor

https://youtu.be/re_LUiEHx1U So if you follow along in the video, I refer to this blog post for you to enter code ...

Dazzle Your Visitors with This Animated Glowing Button Background Effect in Elementor

https://youtu.be/s3kOkTYZDBY So if you follow along in the video, I refer to this blog post for you to enter code ...