Fantastic CSS effects — button — Neon Button using box-shadow

3 min readMar 4, 2024

In this story, we’re going to craft a fantastic neon effect for a button.

Let’s begin!

Build the Basic Button

First, prepare a button. It can be either a div or button element. Remember, if you opt for the button element, you should override the default styling.

Html structure:

<div class="neonButton">
  <div class="neonButton-content">Neon</div>
</div>

CSS

.neonButton {
  display: inline-block;
  padding: 12px 12px;
  font-size: 20px;
  width: fit-content;
  box-sizing: border-box;
  font-family: consolas;
  color: #03e9f4;
  text-transform: uppercase;
  background-color: transparent;
  transition: 0.5s;
  letter-spacing: 4px;
  border: none;
}

We’ve defined a basic transparent button. The neon effect evokes a cyberpunk style, so a modern-looking font-family like Consolas is chosen.

Copy the HTML and CSS into a standard HTML file, and you’ll see a button similar to the image shown — a plain Neon Button.

Add Neon Effect

Now, add a hover state to the button to achieve the neon effect using box-shadow.

.neonShimmerButton:hover {
    background-color: #17c47c;
    color: #050801;
    box-shadow:
      0 0 5px #17c47c,
      0 0 25px #17c47c,
      0 0 50px #17c47c,
      0 0 200px #17c47c;
  }

Now, when you hove on this button, you should be able to see the Neon Effect.

The box-shadow property is used here to create a glow effect around the button. It's like a halo of light that makes the button stand out as if it's illuminated from behind.

Cyberpunk Vibes

We’ve now got a neon effect, but for a true cyberpunk feel, it may not seem tech-savvy enough. Don’t worry; we’re about to ramp it up with a blinking effect. To avoid repeating the color declaration multiple times, we’ll employ CSS variables.

The Blink Animation

.neonShimmerButton:hover {
    --neon-blink-color : #a4d3be;
    --neon-color : #17c47c;
    background-color: var(--neon-color);
    color: #050801;
    animation: blink 2s infinite linear;


      @keyframes blink {
        0%, 100% {
          background-color: var(--neon-color);
          color: #050801;
          box-shadow:
            0 0 5px var(--neon-color),
            0 0 25px var(--neon-color),
            0 0 50px var(--neon-color),
            0 0 200px var(--neon-color);
        }
        50% {
          background-color: var(--neon-blink-color);
          color: #040701;
          box-shadow:
            0 0 5px var(--neon-blink-color),
            0 0 25px var(--neon-blink-color),
            0 0 50px var(--neon-blink-color),
            0 0 200px var(--neon-blink-color);
        }
      }
  }

With this addition, the button now blinks with a neon glow, achieving our cyberpunk-inspired Neon Blinking Button.

And just like that, the Neon effect is complete. This radiant button is sure to catch the eye and light up any user interface with its cyberpunk flair.

Looks like we’ve dialed up the digital dazzle on this button! By using box-shadow and a bit of animation magic, we've created a Neon Button that wouldn't be out of place in a cyberpunk universe. Ready to make your interfaces pop with this tech-savvy touch? Let's code it into existence and watch that neon glow!

Next Effect

Next we gonna make some shimming effect, this will be made and demostrated in the next story as I am tired for the moment, but below is a preview of the effect.