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