WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton HTML animé
2997
dev_b
Ouvrir dans l'éditeur
Video
Publiez votre code
Recommandé
30 November 2025
Formulaire de connexion HTML : Nom d’utilisateur/Adresse e-mail et mot de passe
21 July 2025
Modèle HTML5 pour boutique de jeux vidéo – Thème Lugx
8 February 2025
bouton survolant
HTML
Copy
<!doctype html> <html lang="en"> <head> <title>Animated Button</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="/css/styles.css"> </head> <body> <button class="button"> <span class="button-content">Download </span> </button> </body> </html>
CSS
Copy
body{ background-color: #1f2029; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; } .button { position: relative; overflow: hidden; height: 3rem; padding: 0 2rem; border-radius: 1.5rem; background: #3d3a4e; background-size: 400%; color: #fff; border: none; cursor: pointer; } .button:hover::before { transform: scaleX(1); } .button-content { position: relative; z-index: 1; } .button::before { content: ""; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: 0 50%; width: 100%; height: inherit; border-radius: inherit; background: linear-gradient( 82.3deg, rgba(150, 93, 233, 1) 10.8%, rgba(99, 88, 238, 1) 94.3% ); transition: all 0.475s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
