En-tete Astuces divers html et css
Classic Moderne

Faire un bouton qui change de couleur:

Pour créer une animation sur 3 temps et plus, seul les pourcentages pourront être utilisés. C’est le cas de cet exemple où le bouton ci-dessous change de couleur plusieurs fois.


Bouton



Code source coté HTML

<!-- /button --> <div id="button"> <p id="text-button">Bouton</p> </div>


Code source coté CSS


#button
{
height: auto;
width: 70px;
padding-left: 30px;
padding-right: 30px;
border-style: solid;
border-width: 1px;

animation-name: cameleon;
animation-duration: 5s;
animation-iteration-count: infinite;
}

p#text-button
{
color: #00d008;
font-size: bold;
padding: 10px;
width: 10%;
text-align: center;
}

@keyframes cameleon
{
0% {background-color: #0044e3;}
30% {background-color: white;}
60% {background-color: #d60000;}
100% {background-color: #0044e3;}
}










Haut-de-Page