paint-brush
A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animationsby@zellwk
4,101 reads
4,101 reads

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

by Zell LiewDecember 27th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Learn how to create stunning neon buttons in CSS—glow effects, shadows, and animations unveiled for captivating web design.

Company Mentioned

Mention Thumbnail
featured image - A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations
Zell Liew HackerNoon profile picture

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.


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.


Difference between drop shadow and box shadow


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.