So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
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!
You can download the complete template here
The Following code goes into the button widget under the Custom CSS option:
/* Updated base variables and wrapper */
.elementor-widget-button a.elementor-button {
--btn-width: 180px;
--btn-height: 50px;
--left-gradient: #F803F8;
--right-gradient: #03F2FD;
position: relative;
width: var(--btn-width);
height: var(--btn-height);
padding: 0 !important;
border: none !important;
display: inline-flex;
justify-content: center;
align-items: center;
}
/* Gradient border effect */
.elementor-widget-button a.elementor-button::before,
.elementor-widget-button a.elementor-button::after {
content: '';
position: absolute;
inset: 1px;
transition: 0.5s;
border-radius: inherit;
background: linear-gradient(45deg, var(--left-gradient), transparent, transparent, var(--right-gradient));
z-index: 1;
}
/* Hover effect for outer glow */
.elementor-widget-button a.elementor-button:hover::before,
.elementor-widget-button a.elementor-button:hover::after {
inset: -3px;
}
.elementor-widget-button a.elementor-button:hover::after {
filter: blur(10px);
}
/* Button inner wrapper */
.elementor-widget-button .elementor-button-content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
border-radius: inherit;
overflow: hidden;
}
/* Glass shine effect */
.elementor-widget-button .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;
}
/* Shine animation on hover */
.elementor-widget-button .elementor-button-content-wrapper:hover::before {
left: 50%;
}
/* Ensure button text stays on top */
.elementor-widget-button .elementor-button-text {
position: relative;
z-index: 2;
}