Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Shiny Glimmering Neon Button Effect using CSS

  • Last Updated : 26 Feb, 2021

A Shiny Glimmering Neon Button can be created using pure CSS with the shadow-effect. These buttons can be used to give a good contrast on dark backgrounds or themes. It gives a minimalistic look and attract user attention. The below steps have to followed to create this effect. 

HTML Section: This section contains the HTML code needed for displaying the buttons. The buttons are created with the div element and assigned a class we will create later.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div class="button button_1">
        BUTTON 1
    </div>
    <div class="button button_2">
        BUTTON 2
    </div>
</body>
  
</html>

CSS Section: This section contains the code for adding the effect to the buttons. 



The box-shadow property is used to add a varying set of colors to the shadow with the inset value. The buttons are made rounded by using the border-radius property and properly aligned using the left property.

CSS




/* Set the background color of 
   all the elements */
* {
    background-color: black;
}
  
.button {
 
    /* Change the shape of the button */
    height: 35px;
    width: 100px;
    border-radius: 20%;
 
    /* Position the buttons */
    position: fixed;
    top: 48vh;
 
    /* Center the name of the button */
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.button_1 {
    /* Position the button */
    left: 35vw;
    /* Add the shadow effect for the button */
    box-shadow: inset 0 0 18px #fff
       inset -6px 0 18px #f3bad6
       inset 6px 0 18px #0ff
       inset -6px 0 30px #f3bad6
       inset 6px 0 30px #0ff
       0 0 18px #fff, 4px 0 18px 
       #f3bad6, -4px 0 18px #0ff;
}
  
.button_2 {
 
    /* Position the button */
    left: 55vw;
 
    /* Add the shadow effect for the button */
    box-shadow: inset 0 0 18px #fff
       inset 6px 0 18px #f3bad6
       inset -6px 0 18px #0ff
       inset 6px 0 30px #f3bad6
       inset -6px 0 30px #0ff
       0 0 18px #fff, -4px 0 18px 
       #f3bad6, 4px 0 18px #0ff;
}

Complete Code: It is the combination of the above two sections of the code.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <style>
  
    /* Set the background color of all the elements */
    *{
        background-color: black;
     }
  
    .button {
  
        /* Change the shape of the button */
        height: 35px;
        width: 100px;
        border-radius: 20%;
  
        /* Position the buttons */
        position: fixed;
        top: 48vh;
  
        /* Center the name of the button */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .button_1 {
  
        /* Position the button */
        left: 35vw;
  
        /* Add the shadow effect for the button */
        box-shadow: inset 0 0 18px #fff,
        inset -6px 0 18px #f3bad6,
        inset 6px 0 18px #0ff,
        inset -6px 0 30px #f3bad6,
        inset 6px 0 30px #0ff,
        0 0 18px #fff, 4px 0 18px #f3bad6,
        -4px 0 18px #0ff;
    }
    .button_2 {
  
        /* Position the button */
        left:55vw;
  
        /* Add the shadow effect for the button */
        box-shadow: inset 0 0 18px #fff,
        inset 6px 0 18px #f3bad6,
        inset -6px 0 18px #0ff,
        inset 6px 0 30px #f3bad6, 
        inset -6px 0 30px #0ff,
        0 0 18px #fff, -4px 0 18px #f3bad6,
        4px 0 18px #0ff;
    }
  </style>
</head>
  
<body>
    <div class="button button_1">
        BUTTON 1
    </div>
  
    <div class="button button_2">
        BUTTON 2
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!