loader image

Button Glow Rollover

Button Glow Rollover

Button hover glow effect. Fully customizable size, boarder, shape, colours, boarder radius and animation speed.

3.8/5 - (6 votes)

Template Example

CREDIT Jim Fahad
CSS NEEDED

selector{
--btn-width: 280px;
--btn-height: 80px;
--btn-background: green;
--btn-background2: white;
--left-gradient: #86FF49;
--right-gradient: blue;
}
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-background2),var(--btn-background),var(--right-gradient));
}
selector a:hover:before {
inset: -3px;
}
selector a:hover:after {
inset: -3px;
filter: blur(50px);
}
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(260deg);
}

HTML NEEDED

No Additional HTML Required

robedge.com | mt irvine tobago w.i. | 868.276.2665 | robedge@gmail.com