Skip to content

Neon Light Button Animation Effects

Neon Light Button Animation Effects

Neon Light Button Animation Effect

 

In this video, we are going to see how to create a Neon Light Button Animation Effects. It’s completely made with pure HTML and CSS. A beautiful Neon Light Button hover effect can get visitors’ attention quickly. So, make sure you choose the best animation for your website.

Source Code

If you want to use this CSS Neon Light Button Effects on your website, you need to add this HTML code on your website-specific page or create an index.html file to experiment with it first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Light Button Animation Effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="main-div div1">
            <button><h1>Eat</h1></button>
        </div>
        
        <div class="main-div div2">
            <button><h1>Sleep</h1></button>
        </div>
        
        <div class="main-div div3">
            <button><h1>Code</h1></button>
        </div>
    </div>
</body>
</html>

After that add these CSS Codes to your website or create a style.css file for it.

*{
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
body{
    margin: 0;
    background-color: #060C1F;
    font-family: 'Almarai', sans-serif;
}
.wrapper{
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-back: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
}
button{
    background-color: #060C1F;
    border:transparent;
}
.main-div{
    position: relative;
    margin: 10px;
    background-color: transparent;
}

.div1::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
    box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
    z-index: -1;
    -webkit-animation-name: yellow-shadow;
            animation-name: yellow-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}

.div1::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
    box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
    z-index: -1;;
    -webkit-animation-name: cyan-shadow;
            animation-name: cyan-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}

.div2::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
    box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
    z-index: -1;
    -webkit-animation-name: gradient-shadow;
            animation-name: gradient-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}

.div3::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
    box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
    z-index: -1;
    -webkit-animation-name: half-yellow-shadow;
            animation-name: half-yellow-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}
.div3::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    -webkit-box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
    box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
    z-index: -1;;
    -webkit-animation-name: half-cyan-shadow;
            animation-name: half-cyan-shadow;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;

}
h1{
    font-size: 50px;
    margin: 0;
    position: relative;
    z-index: 3;
    padding: 20px;
    background-color: #060C1F;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

/* Yellow Shadow */
@-webkit-keyframes yellow-shadow{
    0% {
        top: 0;
        left: 0;
    }
    25%{
        top: 50%;
        left: 0;
    }
    50%{
        top:  50%;
        left:  50%;
    }
    75%{
        top: 0;
        left:  50%;
    }
    100%{
        top: 0;
        left: 0;
    }
}
@keyframes yellow-shadow{
    0% {
        top: 0;
        left: 0;
    }
    25%{
        top: 50%;
        left: 0;
    }
    50%{
        top:  50%;
        left:  50%;
    }
    75%{
        top: 0;
        left:  50%;
    }
    100%{
        top: 0;
        left: 0;
    }
}

/*  Cyan Shadow */

@-webkit-keyframes cyan-shadow{
    0% {
        right: 0;
        bottom: 0;
    }
    25%{
        right: 0;
        bottom: 50%;
    }
    50%{
        right:  50%;
        bottom:  50%;
    }
    75%{
        right: 50%;
        bottom:  0;
    }
    100%{
        right: 0;
        bottom: 0;
    }
}
@keyframes cyan-shadow{
    0% {
        right: 0;
        bottom: 0;
    }
    25%{
        right: 0;
        bottom: 50%;
    }
    50%{
        right:  50%;
        bottom:  50%;
    }
    75%{
        right: 50%;
        bottom:  0;
    }
    100%{
        right: 0;
        bottom: 0;
    }
}

/*  Gradient Shadow */

@-webkit-keyframes gradient-shadow{
    0%{
        -webkit-box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
    }
    20%{
        -webkit-box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
                box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
    }
    40%{
        -webkit-box-shadow: 0 0 17px 3px #0f0, 0 0 4px 2px #0f0;
                box-shadow: 0 0 17px 3px #0f0, 0 0 4px 2px #0f0;
    }
    60%{
        -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
                box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
            
    }
    80%{
        -webkit-box-shadow: 0 0 17px 3px #f00, 0 0 4px 2px #f00;
                box-shadow: 0 0 17px 3px #f00, 0 0 4px 2px #f00;
            
    }
    100%{
        -webkit-box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
    }
}
@keyframes gradient-shadow{
    0%{
        -webkit-box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
    }
    20%{
        -webkit-box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
                box-shadow: 0 0 17px 3px #0ff, 0 0 4px 2px #0ff;
    }
    40%{
        -webkit-box-shadow: 0 0 17px 3px #0f0, 0 0 4px 2px #0f0;
                box-shadow: 0 0 17px 3px #0f0, 0 0 4px 2px #0f0;
    }
    60%{
        -webkit-box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
                box-shadow: 0 0 17px 3px #ffff01, 0 0 4px 2px #ffff01;
            
    }
    80%{
        -webkit-box-shadow: 0 0 17px 3px #f00, 0 0 4px 2px #f00;
                box-shadow: 0 0 17px 3px #f00, 0 0 4px 2px #f00;
            
    }
    100%{
        -webkit-box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
                box-shadow: 0 0 17px 3px #C586C0, 0 0 4px 2px #C586C0;
    }
}

/* Half Yellow Shadow */

@-webkit-keyframes half-yellow-shadow{
    0%{
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }
    16.66%{
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
    }
    32.32%{
        top: 0;
        left: 50%;
        height: 50%;
        width: 50%;
    }
    49.98%{
        top: 50%;
        left: 50%;
        height: 50%;
        width: 50%;
    }
    66.64%{
        top:50%;
        left: 0;
        height: 50%;
        width: 100%;
    }
    83.3%{
        top: 50%;
        left: 0;
        height: 50%;
        width: 50%;
    }
    100%{
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }
}
@keyframes half-yellow-shadow{
    0%{
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }
    16.66%{
        top: 0;
        left: 0;
        height: 50%;
        width: 100%;
    }
    32.32%{
        top: 0;
        left: 50%;
        height: 50%;
        width: 50%;
    }
    49.98%{
        top: 50%;
        left: 50%;
        height: 50%;
        width: 50%;
    }
    66.64%{
        top:50%;
        left: 0;
        height: 50%;
        width: 100%;
    }
    83.3%{
        top: 50%;
        left: 0;
        height: 50%;
        width: 50%;
    }
    100%{
        top: 0;
        left: 0;
        height: 50%;
        width: 50%;
    }
}

/* Half Cyan Shadow */

@-webkit-keyframes half-cyan-shadow{
    0%{
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }
    16.66%{
        bottom: 0;
        right: 0;
        height: 50%;
        width: 100%;
    }
    32.32%{
        bottom: 0;
        right: 50%;
        height: 50%;
        width: 50%;
    }
    49.98%{
        bottom: 50%;
        right: 50%;
        height: 50%;
        width: 50%;
    }
    66.64%{
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 100%;
    }
    83.3%{
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 50%;
    }
    100%{
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }
}
@keyframes half-cyan-shadow{
    0%{
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }
    16.66%{
        bottom: 0;
        right: 0;
        height: 50%;
        width: 100%;
    }
    32.32%{
        bottom: 0;
        right: 50%;
        height: 50%;
        width: 50%;
    }
    49.98%{
        bottom: 50%;
        right: 50%;
        height: 50%;
        width: 50%;
    }
    66.64%{
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 100%;
    }
    83.3%{
        bottom: 50%;
        right: 0;
        height: 50%;
        width: 50%;
    }
    100%{
        bottom: 0;
        right: 0;
        height: 50%;
        width: 50%;
    }
}

Also watch:

CSS Isometric Menu Hover Effects | Pure HTML CSS 3D Menu

https://www.youtube.com/watch?v=eE6RblUQLN4

Amazing CSS 3D Menu Hover Effect | CSS 3D Navigation Animation

https://youtu.be/Mt7kQG0gj0c

Leave a Reply

Your email address will not be published. Required fields are marked *