CSS Code
selector{
--btn-width: 180px;
--btn-height: 50px;
--btn-background: #0e1538;
--left-gradient: #F803F8;
--right-gradient: #03F2FD;
}
selector a {
position: relative;
width: var(--btn-width);
height: var(--btn-height);
}
selector a:before,
selector a:after {
content: '';
position: absolute;
inset: 0;
transition: 0.5s;
}
selector a:nth-child(1):before,
selector a:nth-child(1):after {
background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
selector a:hover:before {
inset: -3px;
}
selector a:hover:after {
inset: -3px;
filter: blur(10px);
}
selector a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--btn-background);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/*Glass Shine Effect*/
selector a span::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.075);
transform: skew(160deg);
}Template Link
Glow Button on Hover Effect – Readymade Elementor Templates | WP Care Plus