Creating a pulse effect using CSS

A pulse effect is one of the simplest way to draw attention of the user to a particular element. This article is about creating a simple pulse effect using CSS.

In this tutorial, we’re using the CSS box-shadow property to create this animation. The box-shadow property is used to add shadow around the frame of the element.

Syntax

box-shadow: offset-x offset-y blur-radius spread-radius shadow-color;

Now let’s start creating the animation.

Add HTML Markup

<a href="#" id="msElem">Click Here</a>

Add CSS

@keyframes msPulseEffect {
   0% {
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
   }
 100% {
     box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
   }
 }
 #msElem{
   margin: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   height: 100px;
   color:white;
   background-color: #0078D7;
   border-radius: 50%;
   text-decoration: none;
   animation: msPulseEffect 1s infinite;
 }

If you want to play the animation only on specific events such as a button click, you need to use JavaScript and add the animation to the element manually.