Glowing HTML button with 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):

jQuery(document).ready(function ($) {
    var $element = $('.fading');
 
    function fadeInOut() {
        $element.fadeIn(1000, function () {
            $element.fadeOut(500, function () {
                $element.fadeIn(1000, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }
 
    fadeInOut();
});

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:

<div id="boxes">
    <a href="#" style="display:block;">
        <div class="box-button-main">
        </div>
    </a>
 
    <div class="fading"></div>
</div>

(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 as that turns

HTML element into link.)

And here comes the last part – CSS:

.fading {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:1;
    position: absolute;
    left:0px;
    -webkit-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    -moz-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
}
#boxes {
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 100px;
    top:50px;
}
.box-button-main {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:99;
    position: absolute;
    left:0px;
}

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:

jsfiddle working example