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.
[embedyt] https://www.youtube.com/watch?v=Cf0IBetPKkQ [/embedyt]
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
