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.

Click Here

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.

Was this post helpful? Let me know by leaving a comment below. šŸ˜Š