On-trend pulse buttons using CSS animations, @keyframes and box-shadow.
See the Pen CSS animated pulse buttons using box shadow by Tipue () on CodePen.
How it works
It make use of CSS animations
. First, create a
sequence. In this case, we're using
spread-radius sets the expansion of the shadow effect. Then in the button CSS, invoke the
The last value in the
animation property is the
animation-iteration-count, which is set to infinite in Example 1. In Example 2 it's set to 3 iterations, and in example 3, a single instance.
CSS animations work with IE11, Microsoft Edge 17+, Chrome 49+, Firefox 61+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 67+ and Samsung Internet 4+.