How to Make a Neon Light Button with CSS with Source Code

How to Make a Neon Light Button with CSS with Source Code

Neon buttons are one of those web design trends that have been around for a while now but the neon button can still be seen popping up all over the internet.

Neon buttons look great, but there is a downside to them - they're not easy to code! In this article, you'll learn how to make your own neon button with CSS code.

HTML Code for Neon Button

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Neon Light Button Effect</title>
      Neon Button

CSS Code for Neon Light Button Effect

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #252525;
    font-family: Arial, Helvetica, sans-serif;
button {
    color: #f32179;
    border-color: #f32179;
    font-size: 30px;
    transition: 0.2s;
    background-color: transparent;
    border-radius: 3em;
    cursor: pointer;

button:hover {
    color: #fff;
    background: #f32179;
    box-shadow: 0 0 10px #f32179, 0 0 30px #f32179, 0 0 60px #f32179;


Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates