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.
Commençons avec le code HTML.
<a href="#" class="coeur">BELIEVEMY</a>
Nous avons juste besoin d’un lien.
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.
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()
.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.