Cet exercice consiste à reproduire à partir d’un modèle des boutons en respectant des effets de transitions CSS
Consignes de l’exercice
Créez un nouveau document HTML.
Associez une feuille de style au document HTML.
Reproduisez le bouton ci-dessous en utilisant un lien html <a>
et en respectant les effets de transition.

<a class="btn1" href="#">Bouton</a>
.btn1 { font-size: 1.5rem; padding: 0.7rem 1rem; border: 4px solid #999; color: #999; text-decoration: none; transition: all 0.5s; } .btn1:hover { border-color: #0ec4df; color: #0ec4df; background-color: #cfd9da; }
Dupliquez le code du bouton que vous venez de faire et adaptez-le pour créer le bouton ci-dessous en respectant les effets de transition différents sur le mouse hover et le mouse out.
Attention ! Vous devez conserver tous les boutons de l’exercice.

<a class="btn btn1" href="#">Bouton</a> <a class="btn btn2" href="#">Bouton</a>
.btn { font-size: 1.5rem; padding: 0.7rem 1rem; text-decoration: none; } .btn2 { border: 4px solid #999; color: #999; transition-property: border-color, color, background-color, transform; transition-duration: 0.5s, 0.5s, 0.5s, 1.5s; transform: rotateY(0deg); } .btn2:hover { border-color: #ca1919; color: #ca1919; background-color: #e1b3b3; transform: rotateY(360deg); transition-property: border-color, color, background-color; transition-duration: 2s; }
Reproduisez le bouton de l’exemple ci-dessous en utilisant un lien html <a>
et un élément <span>
qui contient un caractère spécial en HTML. Toujours en respectant les effets de transition.

<a class="btn btn3" href="#">Survolez-moi<span>❯</span></a>
.btn3 { background-color: #f27935; border-radius: 30px; font-size: 1.5rem; padding: 0.5rem 2.5rem 0.5rem 1rem; color: #fff; text-transform: uppercase; font-weight: bold; position: relative; transition: all 0.5s; border: 2px solid #f27935; } .btn3 span { display: block; position: absolute; top: 2px; right: 2px; margin: 0.3rem; width: 1.8rem; height: 1.8rem; line-height: 1.7rem; background-color: transparent; border-radius: 50%; text-align: center; transition: all 0.5s; } .btn3:hover { border-color: #fff; } .btn3:hover span { color: #f27935; background-color: #fff; transform: rotate(-360deg); }
Reproduisez le bouton ci-dessous en utilisant un lien html <a>
et en respectant les effets de transition et notamment l’effet de flip lors du clic.

.btn4 { background-color: #f2225a; color: #fff; position: relative; top: -5px; padding: 0.75rem 1.2rem; font-size: 1.2rem; border-radius: 10px; text-align: center; box-shadow: 10px 10px 5px #656565; transition-property: top, box-shadow, transform; transition-duration: 0.2s, 0.2s, 1s; } .btn4:hover { top: 0px; box-shadow: 5px 5px 5px 0px #656565; } .btn4:active { transform: rotateX(360deg); transition-property: none; }
Reproduisez le bouton ci-dessous utilisant uniquement un lien html <a>
et en respectant les effets de transition. Vous n’avez pas besoin de rajouter quoi que soit en plus de l’élément <a>
dans votre code html.

.btn5 { position: relative; padding: 0 1rem; text-align: center; box-sizing: border-box; font-size: 1.25rem; line-height: 2.5rem; text-decoration: none; color: #6709c6; font-weight: bold; text-transform: uppercase; } .btn5::before, .btn5::after { position: absolute; display: block; content: ""; width: 0; border-top: 3px solid #6709c6; transition-duration: 0.5s; } .btn5::before { top: -3px; left: 0px; } .btn5::after { bottom: -3px; right: 0px; } .btn5:hover { color: #000; } .btn5:hover::before, .btn5:hover::after { width: 100%; } .btn5:active { color: #d408d6; } .btn5:active::before, .btn5:active::after { border-color: #d408d6; }
Correction de l’exercice
Sauf mention contraire*, l'article Transitions CSS : Boutons CSS18 et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.