Author: | salluthdev |
---|---|
Views Total: | 3,628 views |
Official Page: | Go to website |
Last Update: | November 24, 2021 |
License: | MIT |
Preview:

Description:
A set of neon buttons with reflections and animated borders, written in pure CSS/CSS3.
How to use it:
1. The HTML structure for the neon button.
<a href="#"> <span></span> <span></span> <span></span> <span></span> Neon Button </a>
2. The required CSS styles. Feel free to modify and override the CSS rules below to create your own styles.
a { position: relative; display: inline-block; padding: 25px 30px; margin: 0 20px; color: #03e9f4; font-size: 24px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: 0.5s; letter-spacing: 4px; -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); } a:hover { background: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; } a span { position: absolute; display: block; } a span:nth-child(1) { top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: animate1 1s linear infinite; } @keyframes animate1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } a span:nth-child(2) { top: -100px; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: animate2 1s linear infinite; animation-delay: 0.25s; } @keyframes animate2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: animate3 1s linear infinite; animation-delay: 0.5s; } @keyframes animate3 { 0% { right: -100%; } 50%, 100% { right: 100%; } } a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: animate4 1s linear infinite; animation-delay: 0.75s; } @keyframes animate4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } }