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