Shiny Glimmering Neon Button Effect using CSS
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 : 48 vh; /* Center the name of the button */ display : flex; align-items: center ; justify- content : center ; } .button_ 1 { /* Position the button */ left : 35 vw; /* 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 : 55 vw; /* 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: