A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

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

https://youtu.be/uiI7eEUFbc4?embedable=true

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.

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.

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

And we can include the `drop-shadow` like this:

css
.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.

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

css
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.

css
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.

https://youtu.be/L-89PGVLxLo?embedable=true

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`

Codepen Link

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

https://codepen.io/zellwk/pen/poQMqvW?embedable=true

By the way, this article is originally written on my blog. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

Also published here.