glowing/flashing buttons | A simple CSS tutorial

A couple of years ago I published a simple pen on codepen.io, demonstrating how to create glowing effect on buttons. To date, it has reached almost 40K views on codepen with more coming every day . So, I thought I’d create a post to explain how to create glowing effect using CSS animations.

Now, this might not be your corner stone article that will make you a CSS ninja or anything, but this sure helped some people and I hope it will help you too.

The glowing/flashing effect in CSS revolves around CSS animations. Below is the simple CSS code that I used to create this glowing effect on buttons:

 

.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

Now, let’s explain what’s going on in the above code.

At the start of .button class, most of the code is pretty generic. Just some colors and border along side with font adjustments. The interesting part is the animation.

An animation let’s an element gradually change from one set of styles to another. Multiple properties can be changed during a single animation. For each animation we have to specify a set of keyframes to work. These keyframes work as sort of checkpoints, on which an element is transformed according to the specified styles at that given keyframe.

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

The above code creates three keyframes for the animation, named glowing. At 0%, the keyframe will transform the given element (in this case a button tag), according to the given styles. The next transformation will be applied at 50% of the animation and then next at 100%.

You might notice, the styles at 0% and 100% are exactly the same styles. The thing is, to create a glowing effect, we are using box-shadow property. The box shadow property takes the values in the manner mentioned below:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

If you’d like to read more about how CSS box-shadow works, you can learn here.

At 0%, the first keyframe gives the button a background-color and a box-shadow, that is spread to 3px. At 50%, the background-color changes and we make the box-shadow spread from 3px to 40px and then make it revert back to 3px. This transition happens gradually, thus the buttons shadow or glow seems to increase from 3px to 40px. Now, when the animation starts again, the box-shadow on buttons is set to 3px already, which gives the whole animation a smooth transition effect.

How does animation starts again from 0% itself? That part is defined in the animation property on our .button class.

animation: glowing 1500ms infinite;

CSS animations have multiple values. The ones specified in our code are the main. The first value is animation-name. This should correspond to the keyframes animation name. Second value is animation-duration and the third and most important one in this case is animation-iteration-count.

animation-duration is in ms and specifies the amount of time for how long it should take the animation to reach from 0% to 100%. animation-iteration-count specifies how many times the animation should actually run. This can be a simple number 1, 2 or 3, but in our case we are using infinite, which it self says that the animation should run forever, thus giving our buttons a glowing effect.

Here’s a working codepen example of the glowing/flashing buttons effect, on which this post is actually based on.

-webkit-, -moz- and -o- are called Vendor Prefixes. These are used for cross-browser compatibility, however, we will not discuss this in this article . You can learn about vendor prefixes on MDN.

That’s it for this little tutorial . I hope it helps . If you need to ask anything or have any suggestions, you can always contact me. Make sure to leave a comment . Happy coding!