Pour un bouton principal ou même pour un bouton que vous souhaitez mettre en valeur, proposer cet effet de battements de cœur peut donner une impression très moderne sur votre site internet. Découvrez dans cet article comment réaliser cet effet.
1ère étape
Commençons avec le code HTML.
<a href="#" class="coeur">BELIEVEMY</a>Nous avons juste besoin d’un lien.
2ème étape
Occupons-nous du lien.
.coeur {
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: battement 2s infinite cubic-bezier(.66, 0, 0, 1);
text-decoration: none;
}Dans cette étape, nous utilions une animation CSS grâce à la propriété animation.
Nous précisons que nous voulons utiliser la fonction cubic-bezier, qui est une fonction permettant de faire changer la vitesse de l’animation pendant son exécution.
Nous pouvons ainsi, grâce aux valeurs que nous donné à la fonction, que l’animation commence rapidement avec le premier battement puis s’atténue sur la fin.
3ème étape
Il ne nous reste plus qu'à créer l'animation.
@keyframes battement {
to {
box-shadow: 0 0 0 30px rgba(255, 71, 84, 0);
}
}Nous augmentons simplement la taille de l’ombre pour la passer de 0px à 30px et nous rendons celle-ci invisible en passant son opacité à 0 grâce à la fonction rgba().