The next portion of the CSS styles shown below adds animation to the button.

Animation for this button uses keyframes in CSS3. In this portion of styles, animation consists of three keyframes. Each keyframe defines new values for CSS properties background-color and box-shadow. They perform gradual control of animation which can't be accomplished using transition CSS property.

Here is a list of keyframes in the styles for animation:

Starting point is keyframe 0% which defines blue color of background and blue color of shadow around the button with blur distance 3 pixels.

Middle point is keyframe 50% which defines light blue color of background and light blue color of shadow around the button with blur distance 10 pixels.

Ending point is keyframe 100% which is defined the same way as keyframe 0%.

The animation with three keyframes described above creates flashing/glowing effect for the button which is repeated infinite amount of times.

If you need more explanations about animation above, just read the following article: Animation in CSS3.

Animation in the styles above changes color of the button and its shadow from blue to light blue and then these styles loop the animation. If you want to change colors for the button, just find and replace the following parts of code with new colors: