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">
  <head>
    <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>
  </head>
  <body>
    <button>
      Neon Button
    </button>
  </body>
</html>

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;
    padding:20px;
    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;
}

HTML Code for Neon Button

CSS Code for Neon Light Button Effect

Output:

ChatGPT Guide for Software Developers

Don't Get Left Behind! Use these ChatGPT Prompts to 10x Your Productivity