Faire clignoter un bouton en CSS

de , le , 1 5 3 22697 vues

Le bouton à réaliser


Mon bouton

Structure du bouton


Dans un premier temps on va définir le style du bouton sans l'animation.
.boutonarticle{
font-weight: bold;
text-shadow: 0 1px 0 white;
border-radius: 3px;
padding: 5px 10px;
border: 1px solid #DDD;
box-shadow:0px 0px 10px #4183C4;
}

Le clignotement


Le clignotement va se faire sur la dernière ligne box-shadow. A l'aide du paramètre keyframes nous allons définir une animation. Je la définis pour le moteur -webkit mais il faudra faire de même pour les autres ( -moz, etc ) :
@-webkit-keyframes clignote {
0%{box-shadow:0px 0px 10px #4183C4;}
50%{box-shadow:0px 0px 0px #4183C4;}
100%{box-shadow:0px 0px 10px #4183C4;}
}
Petite explication, on crée l'animation clignote. Le pourcentage définit l'état de box-shadow à 0%,50% puis 100% de l'état d'avancement de l'animation.
Ici on modifie la valeur de l’atténuation de box-shadow, elle passe de 10px à 0px. Maintenant il faut appliquer cette animation à notre précédent bouton en rajoutant 3 lignes.
.boutonarticle{
font-weight: bold;
text-shadow: 0 1px 0 white;
border-radius: 3px;
padding: 5px 10px;
border: 1px solid #DDD;
box-shadow:0px 0px 10px #4183C4;
-webkit-animation-name: clignote; //on affecte l'animation clignote à notre bouton
-webkit-animation-duration: 1s; //on définit la durée de l'animation à 1s
-webkit-animation-iteration-count:infinite; //on dit que l'animation se répétera à l'infini.
}
C'est fini !

Tutoriels conseillés

outils professeur date intitulé