In this article, css button hover glow effect

CSS button hover glow effect
CSS button hover glow effect

CSS button hover glow effect

HTML

<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>

CSS

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #000;
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

Output

CSS button hover glow effect

Also Check out Animation zoom in zoom out css

If you interested in the Entertainment genre please check this alsoTHE BIOGRAPHYS

CSS button hover glow effect,css hover glow effect,css image glow effect on hover,css image hover glow effect,glow effect on hover css,hover glow effect,hover glow effect angular,hover glow effect css,hover glow effect html,hover glow effect html css,hover glow effect in css,hover glow effect in html,hover glow effect ui,hover glow effect using css,hover glow effect with css,hover shine effect css,image hover shine effect css,on hover glow css,on hover glow effect css,

Related Posts