How to create Neon Light Button using HTML and CSS ?

The neon light button animation effect can be easily generated by using HTML and CSS. By using HTML we will design the basic structure of the button and then by using the properties of CSS, we can create the neon light animation effect.

HTML code: In this section, we will design a simple button structure using anchor tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>
        How to create Neon Light
        Button using HTML and CSS?
    </title>
</head>
  
<body>
    <a>GeeksForGeeks</a>
</body>
  
</html>

chevron_right


CSS code: In this section, we will use some CSS properties to design the button and use hover class to get the animation effect when we hover the mouse over the button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    /*styling background*/
    body {
        margin: 0;
        padding: 0;
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        background-color: #000;
        font-family: sans-serif;
    }
  
    /* styling the button*/
    a {
        padding: 20px 20px;
        display: inline-block;
        color: #008000;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 3em;
        overflow: hidden;
    }
  
    /*creating animation effect*/
    a:hover {
        color: #111;
        background: #39ff14;
        box-shadow: 0 0 50px #39ff14;
    }
</style>

chevron_right


Complete Code: In this section, we will combine the above two section to create a Neon Light Button usnig HTML abd CSS.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to create Neon Light
        Button using HTML and CSS?
    </title>
  
    <style>
        /*styling background*/
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: #000;
            font-family: sans-serif;
        }
  
        /* styling the button*/
        a {
            padding: 20px 20px;
            display: inline-block;
            color: #008000;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 3em;
            overflow: hidden;
        }
  
        /*creating animation effect*/
        a:hover {
            color: #111;
            background: #39ff14;
            box-shadow: 0 0 50px #39ff14;
        }
    </style>
</head>
  
<body>
    <a>GeeksForGeeks</a>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.