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.

[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

https://youtu.be/Mt7kQG0gj0c

Post a Comment

0 Comments