When I was building the website, I accidentally stumbled on a way to make Neon buttons look good. Magical Dev School 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

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Optimizing Component Development in Astro without Astro Files

Custom Logic in Webflow: How to Push No-Code to Its Limits

Why SaaS Products Feel Harder to Use Every Year

You Should Use This for Your Next Project: Random Image API

Why Designers and Developers Must Rethink the Web Interfaces for an AI-First Era

Build Native-Like Bottom Sheets with CSS Scroll Snap

Optimizing Component Development in Astro without Astro Files

Custom Logic in Webflow: How to Push No-Code to Its Limits

Why SaaS Products Feel Harder to Use Every Year

You Should Use This for Your Next Project: Random Image API

Why Designers and Developers Must Rethink the Web Interfaces for an AI-First Era

Build Native-Like Bottom Sheets with CSS Scroll Snap

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps