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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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:
|
1 2 3 4 5 6 7 8 |
<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 <a> as that turns <div> HTML element into link.)
And here comes the last part – CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.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: