Transitions CSS : Boutons CSS18

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.

Aperçu du premier bouton

Reproduisez le bouton ci-dessous en utilisant un lien html <a> et en respectant  les effets de transition différents sur le mouse hover et le mouse out.

Aperçu du bouton 2

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.

Aperçu du bouton 3

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 clique.

Aperç du bouton 4

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.

Correction de l’exercice