Making a nice neon button


When I was building the Magical Dev School website, I accidentally stumbled on a way to make Neon buttons look good.

There are three important elements:

  1. A little bit of glow around the text
  2. A larger glow around the button
  3. A nice zoom effect

Making the text glow

The trick here is to use drop-shadow instead of text-shadow to create the glow effect.

drop-shadow works better because it creates a softer and more enveloping blur - very much like how a soft light source would fall into its surroundings.

text-shadow is too harsh.

Difference between text shadow and drop shadow.

We only want to use drop-shadow on the text, so we need to change the markup a little bit to include an extra span element.

  <span class="text">Text goes here </span>

And we can include the drop-shadow like this:

.text {
  filter: drop-shadow(0 0 1px currentcolor);

Making the larger glow around the button

We can make a larger glow around the button with drop-shadow and box-shadow. In this case, I prefer box-shadow over drop-shadow because I can control the spread.

This lets me cast a harsher shadow that accentuates the border.

Difference between drop shadow and box shadow

The code for drop-shadow is simpler because you can attach it directly to the button.

button {
  filter: drop-shadow(0 0 1rem var(--purple-300));

The code for box-shadow is slightly harder because you’ll have to use a pseudo-element to make smooth animation. That’s because transitioning box-shadow creates jank.

button {
  position: relative;
  z-index: 1;
  /* ... */

button:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: 0.6;
  box-shadow: 0 0 1em 0.5em var(--purple-300);

A nice zoom effect

The third and final piece is to jell everything together with a little bit of animations.

Here, I opted to:

  • Change the background-color
  • Change the color
  • Make the button bigger (as if it’s floating outwards)
  • And make the background glow a little bit stronger by changing the opacity

Here’s Codepen for you to play around with this neon button.

See the Pen Nice neon buttonby Zell Liew (@zellwk) onCodePen.

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!