Fancy Button code in CSS | HTML

4.6
(10000)

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 named animate1 with 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.

https://github.com/Nagendrarana/CSS_Templates/tree/main

How useful was this post?

Click on a star to rate it!

Average rating 4.6 / 5. Vote count: 10000

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *