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:
(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
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