Glowing Button, Just for Kicks
I got a wild hair the other day to make a glowing button. The basic idea was simple and straightforward: create a button that has a glowing look, as it were phosphorescent or radioactive, and that glows even more fervently when hovered. So, let’s make it!
It all starts with a simple button element. We’ll apply the usual button styles, such as
outline: none, etc. I know that I’ll be adding a pseudo-element, so I’ll set the positioning to
position: relative so that the pseudo-element can be absolutely positioned.
To give the button a glowing effect, we’ll use the
blur type on the css property
filter is often used with images, but will work well for our
background as well. To keep the
blur filter from blurring our button into a fuzzy mess, we’ll copy our button as a pseudo-element, place it just behind our primary button, and apply the
blur filter to it. This will allow us to retain a crisp edge to our primary button, while emitting a slight glow.
We’ll transition the
opacity on hover, so we’ll add a transition rule as well.
To give our button a bit of interactivity, we’ll increase the intensity of the glow on hover. To achieve this we target the pseudo-element when the
button is hovered and double the spread of the
blur and set the
opacity to full.
That’s our basic glowing button.
For an extra bit of panache, we can add a subtle pulsing effect while hovering. Well achieve this by animating the background color of the primary button with an animation that alternates between the initial color and a slightly lighter shade.
We then apply this animation to the primary button upon hover and set the animation to
infinite so that the pulsing loops continuously. And there is our glowing, pulsing button
Let it Glow
There are lots of possibilities for creating interesting effects and experiences with CSS, which is one of the reasons why I love working with it so much. It’s thrilling and rewarding to implement an idea that was hitherto just that — an idea.
Have feedback? Let me know; I’d be happy to hear it. [email protected]