Fancy Button code in CSS | HTML
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Box</title>
<link rel="stylesheet" href="neon.css">
</head>
<body>
<a href="#"><span></span><span></span><span></span><span></span>Neon button</a>
<a href="#"><span></span><span></span><span></span><span></span>Neon button</a>
<a href="#"><span></span><span></span><span></span><span></span>Neon button</a>
</body>
</html>CSS file
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #050801;
font-weight: bold;
}
a {
position: relative;
display: inline-block;
padding: 25px 30px;
margin: 40px 0;
color: #03e9f4;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
margin-right: 50px;
}
a:hover {
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 25px #03e9f4, 0 0 200px #03e9f4;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
a:nth-child(1) {
filter: hue-rotate(270deg);
}
a:nth-child(2) {
filter: hue-rotate(110deg);
}
a span {
position: absolute;
display: box;
}
a span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
a span:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
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: .75s;
}
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%
}
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%
}
}
@keyframes animate3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%
}
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%
}
}Explanation :
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #050801;
font-weight: bold;
}
body: Selects the<body>element of the HTML document.display: flex;: Uses flexbox layout for the body.justify-content: center;: Horizontally centers the content.align-items: center;: Vertically centers the content.height: 100vh;: Sets the height of the body to 100% of the viewport height.background-color: #050801;: Sets the background color of the body to a dark greenish color (#050801).font-weight: bold;: Makes the text within the body bold.
a {
position: relative;
display: inline-block;
padding: 25px 30px;
margin: 40px 0;
color: #03e9f4;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
margin-right: 50px;
}
a: Selects all anchor (<a>) elements.position: relative;: Positions the anchor relative to its normal position.display: inline-block;: Makes the anchor an inline block element.padding: 25px 30px;: Sets padding for the anchor.margin: 40px 0;: Sets top and bottom margins for the anchor.color: #03e9f4;: Sets the text color of the anchor to a light blue (#03e9f4).text-decoration: none;: Removes the default underline from anchor links.text-transform: uppercase;: Converts text to uppercase.transition: 0.5s;: Applies a smooth transition effect over 0.5 seconds.letter-spacing: 4px;: Adds spacing between letters.overflow: hidden;: Clips the content that overflows the padding area.margin-right: 50px;: Sets a right margin for the anchor.
a:hover {
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 25px #03e9f4, 0 0 200px #03e9f4;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
a:hover: Selects the anchor when it is being hovered.background: #03e9f4;: Sets the background color to light blue when hovered.color: #050801;: Sets the text color to dark greenish when hovered.box-shadow: ...;: Applies a box-shadow with multiple layers, creating a glowing effect.-webkit-box-reflect: ...;: Adds a reflection effect using a linear gradient below the anchor.
a span {
position: absolute;
display: box;
}
a span: Selects all<span>elements inside the anchor.position: absolute;: Positions the span relative to its closest positioned ancestor.display: box;: Sets the display type to box.
a span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
a span:nth-child(1): Selects the first span inside the anchor.top: 0; left: 0;: Positions the span at the top-left corner of the anchor.width: 100%; height: 2px;: Sets the width to 100% of the anchor and a height of 2 pixels.background: linear-gradient(90deg, transparent, #03e9f4);: Applies a horizontal linear gradient from transparent to light blue.animation: animate1 1s linear infinite;: Applies an animation namedanimate1with a duration of 1 second, a linear timing function, and it repeats infinitely.
Similar explanations apply to the other a span:nth-child(n) rules, each with variations in positioning, gradient direction, and animation name.
Finally, the @keyframes rules define the animations:
@keyframes animate1 {
0% {
left: -100%;
}
50%, 100% {
left: 100%;
}
}
@keyframes animate2 {
0% {
top: -100%;
}
50%, 100% {
top: 100%;
}
}
@keyframes animate3 {
0% {
right: -100%;
}
50%, 100% {
right: 100%;
}
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%, 100% {
bottom: 100%;
}
}
These @keyframes rules define the animations for the spans, each animating the position (left, top, right, bottom) from off-screen to on-screen and vice versa. The percentages in the keyframes represent the progress of the animation. For example, 0% and 100% mean the starting and ending states, while 50% represents the midpoint of the animation. The animations create a sliding effect for the spans, giving the appearance of borders animating around the anchor element.
