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.

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:

Suggest improvement

Design a Frosted Glass Effect using HTML and CSS

Observations on graph

Share your thoughts in the comments

Shiny Glimmering Neon Button Effect using CSS

HTML

CSS

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?