Glowing HTML button with jQuery

Home / jQuery / Glowing HTML button with jQuery

There are certainly better ways to create a glowing button, but here is one simple way I used on one of my clients’ websites. The request was to create a rounded button with glowing effect. In other words, I wasn’t able to use CSS3 infinite animations because none of them were suitable for that.

Naturally, I turned to jQuery which offers endless possibilities when it comes to HTML and CSS manipulations. Since the main request was that glowing effect should be permanent, I was required to set a loop of effects which would enable me to achieve this. Naturally, fade in and fade out were the first things that came to my mind. Let’s have a look at the function I implemented into WordPress (hence jQuery(document).ready(function ($) syntax):

Furthermore, I had this idea to have one button on the front (it would also be a link), while I would also have an exact button behind it (naturally, I used z-index for this). The back button would actually have this glowing effect, while the front button would remain static, without any effect. So let’s have a look at HTML I used:

(As you can see, I didn’t bother with CSS classes very much – you’re free to do so. And since you asked – display: block was added to <a> as that turns <div> HTML element into link.)

And here comes the last part – CSS:

You can see my idea within this code – as mentioned earlier, I have an exact button below the main one, but I added box-shadow style to it that would, when using fading effect, make our button glowing. And that’s all there is – you can easily use this function to implement your own ideas, especially if you need infinite fading effects.

I’ve also created a jsfiddle where you can see how this works (I hope no one deleted or modified the code on purpose) – check the link within the resources below.

Resources: