Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<style>
.button {
couleur-de-fond: blanc;
bordure: aucune;
couleur: noir;
padding: 16px 32px;
text-align: center;
text-decoration: none;
affichage: inline-block;
taille de police: 16px;
marge: 4px 2px;
durée-de-transition: 0.4s;
curseur: pointeur;
}

.button1 {border: 2px solid #D74444;}
.button2 {border: 2px solid #008CBA;}
.button3 {border: 2px solid #f44336;}
.button4 {border: 2px solid #e7e7e7;}
.button5 {border: 2px solid #555555;}

.button1:hover {
couleur-de-fond: #D74444;
couleur: blanc;
}

.button2:hover {
couleur de fond: #008CBA;
couleur: blanc;
}

.button3:hover {
couleur de fond: #f44336;
couleur: blanc;
}

.button4:hover {background-color: #e7e7e7;}

.button5:hover {
couleur de fond: #555555;
couleur: blanc;
}
</style>
</head>
<body>

<h2>Boutons survolables</h2>

<p>Utilisez le sélecteur :hover pour changer le style du bouton lorsque vous déplacez la souris dessus.</p>
<p><strong>Conseil :</strong>Utilisez la propriété transition-duration pour déterminer la vitesse de l'effet "hover" :</p>

<button class="button button1">Vert</button>
<button class="button button2">Bleu</button>
<button class="button button3">Rouge</button>
<button class="button button4">Gris</button>
<button class="button button5">Noir</button>

</body>

</html>