How to create Neon Light Button using HTML and CSS ?

16 Aug, 2021
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. 
HTML
<!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>
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. 
CSS
<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>
Complete Code: In this section, we will combine the above two section to create a Neon Light Button using HTML abd CSS. 
HTML
<!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>
Output:  
 
kapoorsagar226
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)