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

Post Views: 911
Tags:

Leave a Reply

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

Related Posts

Responsive Glassmorphism Profile Card Hover Effects

Responsive Glassmorphism Profile Card Hover Effects Glassmorphism is a modern way approach to styling web components of any site page and giving a 3D as… Read More »Responsive Glassmorphism Profile Card Hover Effects

CSS Isometric Hamburger Menu Hover Effect

Today we are going to see how to create a CSS Isometric Hamburger Menu Hover Effect with Pure HTML & CSS.  We will see everything… Read More »CSS Isometric Hamburger Menu Hover Effect

CSS Glowing Gradient Glassmorphism Card Hover Effect

CSS Glowing Gradient Glassmorphism Card Hover Effect Hi everyone, Today we are going to learn how to CSS Glowing Gradient Glassmorphism Card Hover Effect Using… Read More »CSS Glowing Gradient Glassmorphism Card Hover Effect

Address

340/C, NORTH IBRAHIMPUR, MODDHO PARA JAME MASJID, KAFRUL, CANTONMENT, MIRPUR-14, DHAKA 1206

  • 01751747955, 01682316552
  • wpcodersclub@gmail.com

Important Links

Our Popular Course ​

DMCA.com Protection Status

© WP Coders Club | All Rights Reserved