Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> .button { bordure: aucune; couleur: blanc; 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 { couleur-de-fond: blanc; couleur: noir; bordure: 2px solide #D74444; } .button1:hover { couleur de fond: #D74444; couleur: blanc; } .button2 { couleur-de-fond: blanc; couleur: noir; bordure: 2px solide #008CBA; } .button2:hover { couleur de fond: #008CBA; couleur: blanc; } </style> </head> <body> <h1>L'élément bouton - Stylisé avec CSS</h1> <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> </body> </html>