Skip to main content

Neon button using HTML & CSS | How to style buttons using HTML & CSS | Deesan Tutorials

Hello there!!! Today we will be learning how to create and style a Neon button using basic HTML & CSS. Here is what we will be doing:

Buttons are an integral part of any website in the world wide web. Buttons help us to navigate through a website or perform a certain action. Many websites which have a bad button design fail to convert visitors to customers because HTML & CSS Buttons are the call to action to make the client perform a certain step. So today, we will learn to create a simple, yet attractive neon styled button using HTML & CSS.

I've also made a YouTube tutorial covering this under 15 minutes, so take a look if that interests you:

So let's get started

Step 0 - Prerequisites

Nothing much, just basic knowledge of HTML & CSS. We use Google fonts to style the text, which you can skip if it is a problem.

Step 1 - Basic Structure

So, fire up your IDE and paste the following code: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Buttons</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">

    <style>
    </style>
  </head>
  <body>
    
    <div>

    </div>

  </body>
</html>

This part is pretty self explanatory. It just declares the document, the head and body tag, and the Google font library

Step 2 - Page Styling

Now paste the following code in your style tag: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
  html, body {

    height: 100%;
    width: 100%;

    padding: 0;
    margin: 0;

    /* To align items horizontally and vertically */
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #222;
  }

This styles the document to prevent unnecessary scrollbars, and give a dark grey background. We use display flex to style the buttons to the center of the page.

Step 3 - Button structure

Now coming to the main part. Paste the following code in your body tag to create 6 buttons at the center of the page. There will be no styling for now, we will do it in the next steps.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div>

  <button class="btn red">Button 1</button>
  <button class="btn green">Button 2</button>
  <button class="btn blue">Button 3</button>

  <br/>

  <button class="btn orange">Button 4</button>
  <button class="btn purple">Button 5</button>
  <button class="btn emerald">Button 6</button>

</div>

Step 4 - Coloured classes

Now paste the following code in your style tag. I will explain it in a few minutes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  .red {
    --color: #f44336;
    border-radius: 30px 0 !important;
  }

  .green {
    --color: #4CAF50;
    border-radius: 30px 0 !important;

  }

  .blue {
    --color: #008CBA;
    border-radius: 30px 0 !important;

  }

  .orange {
    --color: orange;
  }

  .purple {
    --color: #9933CC
  }

  .emerald {
    --color: #009B77 
  }

Now what this basically does is:

  • It creates a variable named color to store the specific color according to the class. This is a crumbelsome process and may occupy a lot of space the more colors you use. That is why we need javascript to make it easier. But we will stick to CSS for the sake of simplicity.
  • It also gives a leaf like shape to the first 3 buttons using the border radius property. We use !important because we will declare a default border radius in the coming steps, and we need to override them.

    Step 5 - Button styling and hover effect

    Now we will style the button. Paste the following lines of code after the previous snippet: 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      .btn {

    padding: 3% 5%;
    margin: 3%;

    border-radius: 30px 30px;
    border: 0;

    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    
    color: var(--color);
    background-color: #222;

    /* Play with these values to achive your desired effect */
    box-shadow: 0 0 5px 1px var(--color), 0 0 6px 3px var(--color) inset;

  }

  .btn:hover {
    
    background-color: var(--color);
    color: white;
    box-shadow: 0 0 5px 1px var(--color);

  }

    Here, we have two blocks of code: one for the button and other for the button when it is hovered upon. We give the buttons appropriate padding and margin, curve the borders a bit, give a fancy font, and coming to the important part: we give the box shadow.
    One element can have multiple box shadows, seperated by commas. Here we have 2 shadows, one for the outside and the other for the insides. We use inset to declare box shadow inside an element.
    We leave the first 2 properties as 0 because if any values are given for them, the shadow will tilt to a single side. You can try it yourself too. We set the shadow color according to the color variable.
    Next, on hover, we set the button's background to the variable color which we declared earlier.

    Hope this tutorial helped you. If you want other CSS/HTML/JS/JQuery/PHP/Vue tutorials, drop a comment and I will look into it.

    Final code: 

      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
    <!DOCTYPE html>
<html>
  <head>
    <title>CSS Buttons</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">

    <style>

      html, body {

        height: 100%;
        width: 100%;

        padding: 0;
        margin: 0;

        /* To align items horizontally and vertically */
        display: flex;
        justify-content: center;
        align-items: center;

        background-color: #222;
      }

      div {
        width: 100%;
        text-align: center;
      }

      /* The following lines of code can be done using just 2 lines in JavaScript. 
      But for the sake of simplicity we are sticking to CSS */

      /* Optional styling: */

      .red {
        --color: #f44336;
        border-radius: 30px 0 !important;
      }

      .green {
        --color: #4CAF50;
        border-radius: 30px 0 !important;

      }

      .blue {
        --color: #008CBA;
        border-radius: 30px 0 !important;

      }



      .orange {
        --color: orange;
      }

      .purple {
        --color: #9933CC
      }

      .emerald {
        --color: #009B77 
      }

      .btn {

        padding: 3% 5%;
        margin: 3%;

        border-radius: 30px 30px;
        border: 0;

        font-size: 1em;
        font-family: 'Montserrat', sans-serif;
        
        color: var(--color);
        background-color: #222;

        /* Play with these values to achive your desired effect */
        box-shadow: 0 0 5px 1px var(--color), 0 0 6px 3px var(--color) inset;

      }

      .btn:hover {
        
        background-color: var(--color);
        color: white;
        box-shadow: 0 0 5px 1px var(--color);

      }

    </style>
  </head>
  <body>
    
<div>

  <button class="btn red">Button 1</button>
  <button class="btn green">Button 2</button>
  <button class="btn blue">Button 3</button>

  <br/>

  <button class="btn orange">Button 4</button>
  <button class="btn purple">Button 5</button>
  <button class="btn emerald">Button 6</button>

</div>

  </body>
</html>
    • Labels:

    Comments

    Post a Comment

    Popular posts from this blog

    Creating a simple search bar using HTML and CSS

    Hello there! Today we will be covering one of the most basic, yet essential things on most websites and blogs: A search bar. A search bar helps clients to navigate through the website rather than typing the URL in the browser, thereby avoiding the crumblesome process. In this post, we will be creating a simple and minimalistic search bar using basic HTML and CSS Here is what we will be doing: Here is the YouTube tutorial: So let's get started! Step 0 - Prerequisites Since this is a simple tutorial, not much is expected from you, except for basic HTML and CSS. We will be using font awesome library for the search icon. If you are not interested in external libraries, you can just insert a search image and style it accordingly. Step 1 - Initialize Just basic html tags and loading the font awesome library 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> Simple search bar </title> <!-- Font awesom...
    Post a Comment
    Read more

    Center element horizontally and vertically to center of screen using plain CSS - Deesan Tutorials

    Hello there!!! In this post you will learn the solution to one of the most sought after problems for web designers: Centering a div both horizontally, and vertically Here is the end result: Here is the youtube tutorial: So let's get our hands to work Step 1: Initialize So this is just the basic stuff of every HTML page: DOCTYPE, html, head and body tags. Just fire up your code editor and paste the following code: 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title> Center element </title> <style> </style> </head> <body> </body> </html> This just creates an empty HTML document Step 2: Elements So, for this tutorial, we are just creating a parent div with a child div in it which we will center shortly. For now, enter the following code in the body tag: 1 2 3 4 5 <div class= "parent" > <div class= "child" > </div> </div> Th...
    Post a Comment
    Read more