In this article
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.
HTML
<a href="#" class="heart">BELIEVEMY</a>We just need a link.
2nd Step
Let's take care of the link.
CSS
.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.
CSS
@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.
Category: Developers