Create a heartbeat button

For a primary button or even for a button you want to highlight, offering this heartbeat effect can give a very modern impression on your website. Discover in this article how to create this effect.

1st Step

Let's start with the HTML code.

<a href="#" class="heart">BELIEVEMY</a>

We just need a link.

2nd Step

Let's take care of the link.

.heart {
      text-align: center;
      padding: 12px 24px;
      color: #fff;
      border-radius: 5px;
      background: #F34D4D;
      box-shadow: 0 0 0 0 rgba(255, 71, 84, .7);
      animation: heartbeat 2s infinite cubic-bezier(.66, 0, 0, 1);
      text-decoration: none;
    }

In this step, we use a CSS animation through the animation property.

We specify that we want to use the cubic-bezier function, which is a function that allows us to change the speed of the animation during its execution.

3rd Step

We just need to create the animation.

@keyframes heartbeat {
      to {
        box-shadow: 0 0 0 30px rgba(255, 71, 84, 0);
      }
    }

We simply increase the size of the shadow from 0px to 30px and make it invisible by setting its opacity to 0 using the rgba() function.