WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
bouton plus
1064
AmirAliAkrami
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 July 2025
Exemple d'animation de bouton HTML
27 November 2025
Exemple de code de bouton HTML
28 May 2024
Bouton Supprimer
HTML
Copy
بیشتر دانستن
CSS
Copy
button { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; } button.learn-more { width: 12rem; height: auto; } button.learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #3f4af0; border-radius: 1.625rem; } button.learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } button.learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } button.learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } button.learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #282936; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; } button:hover .circle { width: 100%; } button:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); } button:hover .button-text { color: #fff; } @supports (display: grid) { body { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.625rem; grid-template-areas: ". main main ." ". main main ."; } #container { grid-area: main; align-self: center; justify-self: center; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */