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.

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.

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.

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.