Shiny glimmering neon button effect using CSS

CSSWeb DevelopmentFront End Technology

Buttons are one of the integral elements on any website. In order to make your webpage user friendly and interactive, it is a must to have responsive buttons in it. Buttons are used for processing certain events for the user. Whether it be submitting a form, or printing something or getting to view more information of certain things, buttons have always been useful.

In this article, we will see how we can use different styling CSS properties to decorate a button in order to make it more attractive.

Let’s see how to create a button in HTML.

Creating a button in HTML

For creating a button in HTML, we use the button tag.

Syntax

<button> </button>

Example

Given below is a simple example of creating a button element.

<!DOCTYPE html> <html> <head> <title> Button element </title> <style> body{ text-align: center; } </style> </head> <body> <h1> CSS Buttons </h1> <button> Click Me </button> </body> </html>

Styling the buttons with neon effect

Glimmering effects can be given to buttons when your web page has a dark or black background. It provides a good contrasting effect. Shiny effects with neon colour can be given to buttons using the box-shadow property of CSS.

Example

Have a look at the below example in which we have created two buttons with different shiny effects using CSS.

<!DOCTYPE html> <html> <head> <title> CSS Buttons </title> <style> body{ text-align: center; background-color: #301934; margin: 10px 5px 5px 10px; padding: 0px; } h1{ color: yellow; } section{ margin: 10px 10px 10px 10px; padding: 5px 5px 5px 5px; } button{ height: 25px; width: 120px; margin: 30px; padding: 0px; position: relative; top: 15px; border-radius: 15% 3px solid ; align-items: center; justify-content: center; } .button1{ position: relative; top: 15px; box-shadow: inset 0 0 18px #fff, inset -8px 0 18px #f3bad6, inset 8px 0 20px green, inset -8px 0 30px #f3bad6, inset 8px 0 30px green, 0 0 20px green, 6px 0 20px white, -6px 0 20px white; } .button2{ position: relative; top: 15px; box-shadow: inset 0 0 20px white, inset 8px 10px 20px #f3bad6, inset -8px 0 20px red, inset 8px 10px 30px #f3bad6, inset -8px 0 30px red, 0 0 20px #fff, -6px 0 20px #f3bad6, 6px 0 20px red; } </style> </head> <body> <h1> Shiny effects on CSS Buttons</h1> <section> <button class= "button1"> Click Me </button> <button class= "button2"> Submit </button> </section> </body> </html>

Here,

  • Two HTML buttons are created with different classes.
  • Position and border-radius of both the buttons is assigned using CSS properties.
  • Glimmering effect is given using the box-shadow property.

Border-radius property

It is a CSS property which is used to define the radius of the corner of an element. It enables us to add rounded corners to the elements.

Syntax

border-radius: top-left, top-right, bottom-right, bottom-left

Box-shadow property

It is used to give dark shadow to one side while a light shadow to other side.

inset is one of the values of box-shadow which gives the shadow an effect such that the content of the box appears to be below the border. It enables us to create shadow inside the border.

Example

We can also make use of another CSS property that is, text-shadow property to give neon effects to any element.

Consider the following example.

<!DOCTYPE html> <html> <head> <title> CSS Buttons </title> <style> body{ text-align: center; background-color: #301934; margin: 10px 5px 5px 10px; padding: 0px; } h1{ color: yellow; } section{ margin: 10px 10px 10px 10px; padding: 5px 5px 5px 5px; } button{ height: 50px; width: 120px; margin: 30px; padding: 0px; position: relative; top: 15px; border: 4px solid orange; align-items: center; justify-content: center; } .button1{ position: relative; top: 15px; border: cyan; box-shadow: 4px 0 4px 6px cyan, -5px 0 5px -6px cyan, 5px 0 4px 6px cyan, -5px 0 5px 6px cyan, inset 2px 0 10px cyan, inset -2px 0 10px #FF00CC, inset 2px 0 5px cyan, inset 2px 1px 5px #FF00CC; text-shadow: 0 10px 15px #00FFFF; background-color: #301934; color: cyan; font-weight: 1000; } .button2{ position: relative; top: 15px; background-color: #00FF66; color: white; border: #00FF66; font-weight: 900; text-shadow: 0 10px 15px white; box-shadow: 5px 5px 8px 2px #00FF33, -5px -5px 8px -2px #FFFF33, 6px -5px 10px 2px #00FF66, -5px 5px 8px 2px #FFFF33, inset 2px 0 2px #00FF66, inset -2px 0 2px #FFFF33, inset 2px 0 2px #00FF66, inset 2px 0 2px #FFFF33; } </style> </head> <body> <h1> Shiny effects on CSS Buttons </h1> <section> <button class= "button1"> Click Me </button> <button class= "button2"> Submit </button> </section> </body> </html>

Here,

Text-shadow property of CSS allows you to apply shadow to your text.

Syntax

text-shadow: h v blur color;

Parameters

  • h − dimension of the horizontal shadow. It can have negative value.

  • v − dimension of the vertical shadow. It also can have negative value.

  • blur − it specifies the radius to be blurred. Its default value is 0.

  • color − specifies the color of the shadow

Example

<!DOCTYPE html> <html> <head> <style> h1{ text-shadow: 5px 5px 8px #6E0DD0; } </style> </head> <body> <h1> This is an example to show text-shadow property </h1> </body> </html>

The text is displayed with a shadow.

Conclusion

Box-shadow property of CSS can be used to give various effects to an element. The key rule is to try and apply. Giving different values to this property can give many more effects to the element. So, unravel it and explore this property.

raja
Updated on 11-Oct-2022 14:54:27

Advertisements