9 Neon Buttons Pure CSS, Create Glowing Button Effect

9 Neon Buttons Pure CSS, Create Glowing Button Effect

September 28, 2019

How to create a Neon Button? Learn: Give a glowing effect to the button using pure CSS and make it sunshiny.


Super shine Neon Button Effects
Super Bright Neon Button

Hello, guys welcome to the CodingTuting with Jignesh Panchal. I hope you like our last post in which we created an Automatic Typing Effect using JavaScript. If you haven't visited so, click here.

And today we'll focus on Neon Effect on Button. So, let's get started.


What is Neon?

Neon is an element used in electric CFL bulbs, tubes, etc. This element is responsible for giving the brightness to the bulb.


What is Neon Button?

An HTML Button that glows like a bright light or shining LED/CFL bulb, is called Neon Button.


How to give a Glowing Effect for Neon?

There is no direct method to apply glowing effect on any HTML element. It is possible using CSS box-shadow property. We can create a glowing effect by giving a wide colorful box-shadow to the button. We'll do something like this.

I've created 9 different CSS Neon Button and categorized them in 3.

  • CSS Solid Neon Buttons
  • CSS Bordered Neon Buttons
  • CSS Gradient Neon Buttons

I've applied some animation for giving a unique transformation.


Preview of CSS Glowing Button





Source Code for Neon Glow CSS Buttons

Let's understand the source code before copy it. Because this creativity is an advance level CSS. I used before-after pseudo-elements in some buttons. I'm using Google Fonts in my code. You can use it too or any others as you like.


  • Solid Button - I applied wide box-shadow on hover and on focus effect and gave transition of 0.3 Second. Also, I changed the background-color brighter than the actual background-color.
  • Breath Button - Same concept of Solid Button. Apart from this, I created a keyframes animation by name breathing, this animation is increasing and decreasing the size of the box-shadow. Then I call this animation with the execution time of 3 seconds and infinite times.
  • Heart Bit - Same concept of Breath Button. I just manipulate the animation in this. First 0% to 30% the box-shadow will 10px, next 31% to 39% box-shadow will same, next 40% to 50% box-shadow will 20px, then 51% to 100% box-shadow will 0px.
  • Border - For this, I've used inset shadow property along with simple box-shadow property. Inset property allows us to give box-shadow to inside the border. Apart from this, I've used a text-shadow for glowing the text.
  • Inner Height Button - In this button, I created an empty <span> tag with class bg-height. And placed this empty <span> tag in the vertically and horizontally center inside the button. Then I gave background-color and height = 0px to it.

    Once the user hovers this button, the height increase to full of the button. This height changing effect is giving a cool height increase animation look.
  • Inner Width Button - Used the same method of Inner Height Button. The changes are only - I increased the width instead of height.
  • Gradient Button - I took an empty <span> tag for background shadow. Then I increased the dimention of this empty <span> element and set it index = 0 and set original button index = 1.

    Then I created two pseudo-elements of <span> element with the help of ::before - ::after property.

    And I gave two different background colors to them. Then I set opacity = 0 to <span> element. Last, I set opacity = 1 on hover and on focus the button.
  • Gradient Moving Background Button - Along with the same method of Gradient Button, I defined a keyframes animation moveInnerBg. The job of this animation is to keep changing the background-position when the user hovers or focus the button.
  • Gradient Tri Color Button - Same method of Gradient Moving Button. Only the changes is - I changed the background-position of the element vertically.

NeonButton.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="StyleNeon.css">

    <title>Neon Buttons</title>
</head>

<body>
    <h1>NEON Buttons</h1>

    <section class="main-container">

        <div class="btn-row">
            <div class="ct-btn">
                <button class="sky-neon">Solid</button>
            </div>
            <div class="ct-btn">
                <button class="breath-neon">Breath</button>
            </div>
            <div class="ct-btn">
                <button class="heart-bit-neon">Heart Beat </button>
            </div>
        </div>

        <div class="btn-row">
            <div class="ct-btn">
                <button class="border-neon">Border</button>
            </div>
            <div class="ct-btn">
                <button class="inner-height-neon"><span class="bg-height"></span><span class="btn-text">Inner Height</span></button>
            </div>
            <div class="ct-btn">
                <button class="inner-width-neon"><span class="bg-width"></span><span class="btn-text">Inner Width</span></button>
            </div>
        </div>

        <div class="btn-row">
            <div class="ct-btn">
                <div class="gr-solid">
                    <span class="gr-shadow1"></span>                        
                    <button class="gradient-neon">Gradient</button>
                </div>
            </div>
            <div class="ct-btn">
                <div class="gr-move">
                    <span class="gr-shadow2"></span>                        
                    <button class="gradient-neon">Gradient Move</button>
                </div>
            </div>
            <div class="ct-btn">
                <div class="gr-tri">
                    <span class="gr-shadow3"></span>                        
                    <button class="gradient-neon">Gradient Tri</button>
                </div>
            </div>
        </div>

    </section>
</body>

</html>


StyleNeon.css

/*Code by CodingTuting.Com*/
* {margin:0;padding: 0;}

body {
    background-color: #272727;
}

h1 {
    text-align: center;
    color: #fff;
    font-family: raleway;
    margin-top: 20px;
    font-size: 50px;
    font-weight: 100;
    letter-spacing: 12px;
    border-bottom: 1px solid #86dbff;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    color: #3cffed;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #03a9f4, 0 0 40px #03a9f4, 0 0 50px #03a9f4, 0 0 60px #03a9f4, 0 0 70px #03a9f4;
}

.main-container {
    padding: 10px;
    margin: 10px;
    text-align: center;
}

.btn-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height:180px;
}

.ct-btn {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    margin:20px;
}

/* Common CSS for all Buttons */
button {
    font-size: 20px;
    width: 230px;
    height: 80px;
    border-radius: 4px;
    cursor:pointer;
    font-family: lato;
}

/* Solid Button */
.sky-neon {
    color: #1c5169;
    background-color: #86dbff;
    -webkit-transition: .3s all ease-in;
    transition: .3s all ease-in;
    border: 2px solid transparent;
}

.sky-neon:hover, .sky-neon:focus {
    -webkit-box-shadow: 0px 0px 20px 15px #3cc6d8;
    box-shadow: 0px 0px 30px 20px #3cc6d8;
    background-color: #d7f3ff;
}

/* Breath Button */
.breath-neon {
    color: #2b8a2f;
    background-color: #9dffa1;
    border: 2px solid transparent;
    -webkit-transition: .5s all ease-in;
    transition: .5s all ease-in;
}

.breath-neon:hover, .breath-neon:focus {
    background-color: #ceffd0;
    -webkit-animation: breathing 3s infinite;
            animation: breathing 3s infinite;
    -webkit-box-shadow: 0px 0px 10px 0px #b5ffb8;
            box-shadow: 0px 0px 10px 0px #b5ffb8;
}

/* Heart Bit Button */
.heart-bit-neon {
    background-color: #ff6666;
    color: #fff;
    border: 2px solid transparent;
}

.heart-bit-neon:hover, .heart-bit-neon:focus {
    background-color: #ff6666;
    color: #fff;
    -webkit-animation: heartBit 1.2s infinite;
            animation: heartBit 1.2s infinite;
}

/* Simple Border Button */
.border-neon {
    background-color: transparent;
    border: 2px solid pink;
    color: pink;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.border-neon:hover, .border-neon:focus {
    -webkit-box-shadow: inset 0px 0px 8px 3px #ff94b8;
    box-shadow: 0px 0px 10px 3px #ff94b8, inset 0px 0px 10px 3px #ff94b8;
    border-color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff94b8, 0 0 40px #ff94b8, 0 0 50px #ff94b8, 0 0 60px #ff94b8, 0 0 70px #ff94b8
}

/* Inner Height Button */
.inner-height-neon {
    background-color: transparent;
    border: 2px solid #00ccb9;
    color: #00ccb9;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
}

    .inner-height-neon .bg-height {
        background-color: #6bfff1;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        height: 0%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-transition: height .3s, top .3s;
        transition: height .3s, top .3s;
    }

    .inner-height-neon .btn-text {
        z-index: 1;
    }

.inner-height-neon:hover {
    -webkit-box-shadow: 0px 0px 30px 20px #45ffee;
            box-shadow: 0px 0px 30px 20px #45ffee;
    border-color:#6bfff1;
}

.inner-height-neon:hover .bg-height {
    height:100%;
    top:0%;
    z-index: -1;
}

.inner-height-neon:hover .btn-text {
    color:#1aa99b
}

/* Inner Width Buttton */
.inner-width-neon {
    background-color: transparent;
    border: 2px solid #ffed5a;
    color: #ffed5a;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
}

    .inner-width-neon .bg-width {
        background-color: #fff6a8;
        position: absolute;
        left: 50%;
        right: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 0%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-transition: width .3s, left .3s;
        transition: width .3s, left .3s;
    }

    .inner-width-neon .btn-text {
        z-index: 1;
    }

.inner-width-neon:hover {
    -webkit-box-shadow: 0px 0px 30px 20px #fff5a2;
            box-shadow: 0px 0px 30px 20px #fff5a2;
    border-color:#fff6a8;
}

.inner-width-neon:hover .bg-width {
    width:100%;
    left:0%;
    z-index: -1;
}

.inner-width-neon:hover .btn-text {
    color:#a79500
}

/* Gradient Simple */
.gradient-neon {
    background-image: linear-gradient(45deg, red , #FFEB3B, #ff2a73);
    border: none;
    color: #710000;
}

.gr-solid {
    position: relative;
}

    .gr-solid:hover .gradient-neon{
        background-image: linear-gradient(45deg, #ff5555 , #fff179, #ff5992);
    }

    .gr-shadow1, .gr-shadow1::before, .gr-shadow1::after {
        content:'';
        position: absolute;
        top: 0px;
        border-radius: 4px;
        width: 139px;
        height: 79px;
        z-index: -1;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;
        opacity:0;
    }

    .gr-solid:hover .gr-shadow1, .gr-shadow1::before, .gr-shadow1::after {
        opacity:1;
    }

    .gr-shadow1 {
        -webkit-box-shadow: 0px 0px 30px 20px #ffe63a;
                box-shadow: 0px 0px 30px 20px #ffe63a;
        left:45px;
    }

    .gr-shadow1::before {        
        right: 0;
        bottom: 0;
        left: -45px;
        -webkit-box-shadow: 0px 0px 30px 20px #ff4712;
                box-shadow: 0px 0px 30px 20px #ff4712;
    }

    .gr-shadow1::after {        
        bottom: 0;
        left: 45px;
        -webkit-box-shadow: 0px 0px 30px 20px #ff466c;
                box-shadow: 0px 0px 30px 20px #ff466c;
    }

/* Movable Gradient Button */
.gr-move {
    position: relative;
}

    .gr-move .gradient-neon {
        background-image: -webkit-gradient(linear, left top, right top, from(#9C27B0) , color-stop(#E91E63), to(#8BC34A));
        background-image: linear-gradient(90deg, #9C27B0 , #E91E63, #8BC34A);
        background-size: 300%;
        border: none;
        color: #fff;
    }

    .gr-move:hover .gradient-neon {
        -webkit-animation:moveInnerBg 4s infinite;
                animation:moveInnerBg 4s infinite;
    }
    
    .gr-move:hover .gradient-neon{
        background-image: -webkit-gradient(linear, left top, right top, from(#ef92ff) , color-stop(#ff7ba8), to(#d0ff99));
        background-image: linear-gradient(90deg, #ef92ff , #ff7ba8, #d0ff99);
    }

    .gr-shadow2, .gr-shadow2::before, .gr-shadow2::after {
        content:'';
        position: absolute;
        top: 0px;
        border-radius: 4px;
        width: 139px;
        height: 79px;
        z-index: -1;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;            
        opacity:0;
    }

    .gr-move:hover .gr-shadow2, .gr-shadow2::before, .gr-shadow2::after {
        opacity:1;
    }

    .gr-shadow2 {
        -webkit-box-shadow: 0px 0px 30px 20px #d4f39a;
                box-shadow: 0px 0px 30px 20px #d4f39a;
        left:45px;
    }

    .gr-shadow2::before {        
        right: 0;
        bottom: 0;
        -webkit-box-shadow: 0px 0px 30px 20px #fb84ff;
                box-shadow: 0px 0px 30px 20px #fb84ff;
        -webkit-animation:moveBg1 2.5s infinite;
                animation:moveBg1 2.5s infinite;
    }

    .gr-shadow2::after {        
        bottom: 0;
        -webkit-box-shadow: 0px 0px 30px 20px #eeaba3;
                box-shadow: 0px 0px 30px 20px #eeaba3;
        -webkit-animation:moveBg2 3s infinite;
                animation:moveBg2 3s infinite;
    }

    /* Gradient Tri Color */
    .gr-tri {
        position: relative;
    }

        .gr-tri .gradient-neon {
            background-image: -webkit-gradient(linear , left top, left bottom , from(#FF5722) , color-stop(#ffffff), to(#2b8a2f));
            background-image: linear-gradient(#FF5722 , #ffffff, #2b8a2f);
            border: none;
            color: #3F51B5;
        }
    
        .gr-tri:hover .gradient-neon{
            background-image: -webkit-gradient(linear , left top, left bottom , from(#FF5722) , color-stop(#ffffff), to(#2b8a2f));
            background-image: linear-gradient(#FF5722 , #ffffff, #2b8a2f);
        }
    
        .gr-shadow3, .gr-shadow3::before, .gr-shadow3::after {
            content:'';
            position: absolute;
            top: 40px;
            border-radius: 4px;
            width: 230px;
            height: 0px;
            z-index: -1;
            -webkit-transition: all .3s ease-in;
            transition: all .3s ease-in;
            opacity:0;
        }

        .gr-tri:hover .gr-shadow3, .gr-shadow3::before, .gr-shadow3::after {
            opacity:1;
        }
    
        .gr-shadow3 {
            -webkit-box-shadow: 0px 0px 30px 20px #fff;
                    box-shadow: 0px 0px 30px 20px #fff;
            left: 0;
        }
    
        .gr-shadow3::before {        
            right: 0;
            top: -35px;
            bottom: 0;
            left: 0px;
            -webkit-box-shadow: 0px 0px 30px 20px #FF5722;
                    box-shadow: 0px 0px 30px 20px #FF5722;
        }
    
        .gr-shadow3::after {        
            bottom: 0;
            left: 0px;
            -webkit-box-shadow: 0px 0px 30px 20px #2b8a2f;
                    box-shadow: 0px 0px 30px 20px #2b8a2f;
        }

/* Animation for Breath Button */
@-webkit-keyframes breathing {
    0% {-webkit-box-shadow: 0px 0px 10px 0px #b5ffb8;box-shadow: 0px 0px 10px 0px #b5ffb8;}
    50% {-webkit-box-shadow: 0px 0px 30px 20px #b5ffb8;box-shadow: 0px 0px 30px 20px #b5ffb8;}
    100% {-webkit-box-shadow: 0px 0px 10px 0px #b5ffb8;box-shadow: 0px 0px 10px 0px #b5ffb8;}
}

@keyframes breathing {
    0% {-webkit-box-shadow: 0px 0px 10px 0px #b5ffb8;box-shadow: 0px 0px 10px 0px #b5ffb8;}
    50% {-webkit-box-shadow: 0px 0px 30px 20px #b5ffb8;box-shadow: 0px 0px 30px 20px #b5ffb8;}
    100% {-webkit-box-shadow: 0px 0px 10px 0px #b5ffb8;box-shadow: 0px 0px 10px 0px #b5ffb8;}
}

/* Animation for Heart Bit Button */
@keyframes heartBit {
    0%, 30% {-webkit-box-shadow: 0px 0px 30px 10px #ff5a5a;box-shadow: 0px 0px 30px 10px #ff5a5a;}
    40%,50% {-webkit-box-shadow: 0px 0px 30px 20px #ff5a5a;box-shadow: 0px 0px 30px 20px #ff5a5a;}
    100% {-webkit-box-shadow: 0px 0px 30px 0px #ff5a5a;box-shadow: 0px 0px 30px 0px #ff5a5a;}
}

@-webkit-keyframes heartBit {
    0%, 30% {-webkit-box-shadow: 0px 0px 30px 10px #ff5a5a;box-shadow: 0px 0px 30px 10px #ff5a5a;}
    40%,50% {-webkit-box-shadow: 0px 0px 30px 20px #ff5a5a;box-shadow: 0px 0px 30px 20px #ff5a5a;}
    100% {-webkit-box-shadow: 0px 0px 30px 0px #ff5a5a;box-shadow: 0px 0px 30px 0px #ff5a5a;}
}

/* Animation for Moving Gradient Background */
@-webkit-keyframes moveBg1 {
    0% {left :0px;}
    50% {left:-45px;}
    100% {left:0px;}
}

@keyframes moveBg1 {
    0% {left :0px;}
    50% {left:-45px;}
    100% {left:0px;}
}

@-webkit-keyframes moveBg2 {
    0% {left :0px;}
    50% {left:45px;}
    100% {left:0px;}
}

@keyframes moveBg2 {
    0% {left :0px;}
    50% {left:45px;}
    100% {left:0px;}
}

/* Animation for Moving Inner Background Button */
@-webkit-keyframes moveInnerBg {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes moveInnerBg {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}


So, which button you like most? Did you got the method of create neon effect? Let me know in the comment bottom. This CSS only looks difficult but in actual, it is very easy.

I would like you to do some more creativity like this.


Sharing is Caring


Thanks for Reading

Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

Share this

Related Posts

2 Comments

Write Comments
Kk
May 7, 2021 at 7:58 PM delete

Hey,
This is awesome. Tnk u for sharing 🤩

Reply
avatar
Unknown
December 18, 2021 at 8:58 PM delete

Is there a way to apply this to a Squarespace website? If so, can someone please share?

Reply
avatar
Subscribe to: Post Comments (Atom)