Neon Buttons design with HTML CSS only

Nils 0 Comments
Hello, guys welcome to the Nils Creation. Here you will find all kinds of HTML CSS Designs tutorials and templates. Today we'll see How to create Neon Effect on Button using only HTML and CSS. So, let's get started.

What is Neon?

Neon color is a concept of designing where an element has color glowing with dark background. It gives lightening effects in darkness. This is very powerful designing concept, specially for gaming, music, disco, lighting effects etc.


How to give a Glowing Neon Effect?

CSS allow us to apply many designing property to our elements. It is possible using CSS box-shadow property. We can create a glowing shadow effect by giving a wide colorful box-shadow to the button. This effect can be used for different purposes such as text, box, button, inputs, cards etc.

HTML CSS Neon Buttons

I've created 4 different colors CSS Neon Buttons. You can also change its colors as suitable as your website.

Also see this helpful post - Best 6 tools for HTML,CSS designing. 

HTML  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Neon Buttons in CSS </title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!-- partial:index.partial.html -->
    <div>
        <button class="button1">Button</button>
        <button class="button2">Button</button>
        <button class="button3">Button</button>
        <button class="button4">Button</button>
    </div>
    <!-- partial -->
</body>

</html>


CSS  
body {
    margin: 0;
    padding: 0;
    background-color: #0f0033;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    display: block;
    margin: 35px auto;
    padding: 1em 3em;
    background: transparent;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    position: relative;
    box-shadow: 3px 3px 7px 2px rgb(0 0 0 / 50%);
}

.button1 {
    color: #2196f3;
    border: 2px solid #2196f3;
}

.button1:hover {
    color: white;
    background: #2196f3;
    box-shadow: 0 0 10px #2196f3, 0 0 30px #2196f3, 0 0 40px #2196f3;
}

.button2 {
    color: #00ff15;
    border: 2px solid #00ff15;
}

.button2:hover {
    color: white;
    background: #00ff15;
    box-shadow: 0 0 10px #00ff15, 0 0 30px #00ff15, 0 0 40px #00ff15;
}

.button3 {
    color: #ff0000;
    border: 2px solid #ff0000;
}

.button3:hover {
    color: white;
    background: #ff0000;
    box-shadow: 0 0 10px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000;
}

.button4 {
    color: #fff700;
    border: 2px solid #fff700;
}

.button4:hover {
    color: white;
    background: #fff700;
    box-shadow: 0 0 10px #fff700, 0 0 30px #fff700, 0 0 40px #fff700;
}


Preview of code:





Conclusion : 

Hopefully, the tutorial has completed and helped you to learn how to make this neon button design in CSS. If you have any difficulty or want to give any suggestions, then you can always ask me by commenting. I will help you completely.
Tags

Post a Comment

Post a Comment

Previous Post Next Post