Skip to content
Related Articles

Related Articles

Improve Article

How to create Neon Light Button using HTML and CSS ?

  • Last Updated : 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.
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :