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 { position: relative; couleur-de-fond: #D74444; bordure: aucune; taille de police: 24px; couleur: #FFFFFF; padding: 20px; largeur: 200px; text-align: center; durée-de-transition: 0.4s; text-decoration: none; débordement: caché; curseur: pointeur; } .button:after { contenu: ""; arrière-plan: #f1f1f1; afficher: bloc; position: absolute; padding-top: 300%; padding-left: 350%; marge-gauche: -20px; marge-haut: -120%; opacité: 0; transition: all 0.8s } .button:active:after { padding: 0; marge: 0; opacité: 1; transition: 0s } </style> </head> <body> <h2>Bouton animé - Effet d'onde</h2> <button class="button">Cliquez sur moi</button> </body> </html>