How to create pulse effect animation CSS?

ARyan MAurya
November 24, 2020
No Comments

I’ve been playing around the past week with this CSS animation and that I thought that it would be nice and useful to write down a brief article about how we will create it.

Where can you use this type of effect? Well… you’ll be able to use this effect if you would like to highlight something on the website. I’m using this to highlight the subscribe button.

The HTML

<button class="btn">Subscribe</button>

In this HTML, we just adding a button with btn class.

The CSS

.btn {
    background: #EF5350;
    color: #fff;
    padding: 12px 20px;
    border: none;
    position: relative;
}

In this CSS, simply we added some basic CSS styles. And now for the fun part, let’s create the animation:

.btn:after {
    content: '';
    position: absolute;
    border: 2px solid #F44336;
    left: -8px;
    top: -7px;
    right: 0;
    bottom: 0;
    animation: pulse 1.5s infinite;
    height: 49px;
    width: 111px;
    z-index: -1;
}

@keyframes pulse { 
  0% { 
    transform: scale(.1);
    opacity: 1;
  }
  80% { 
    transform: scale(1);
    opacity: .5;
  }
  100% { 
    transform: scale(1);
    opacity: 0;
  }
}

Simple yet powerful effect because it will get your visitor’s attention to the element on the page that you simply want to be highlighted.

I hope you like it! Let me know where you’ll use this effect!

Post your comment

Your email address will not be published. Required fields are marked *