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 premier bouton de l’exemple ci-dessous en utilisant un lien html <a> et en respectant  les effets de transition.

Voir le code par Julien Crego (@crego) sur CodePen.

Reproduisez le second bouton de l’exemple en utilisant un lien html <a> et en respectant  les effets de transition différent sur le mouse hover et le mouse out.

Reproduisez le troisième bouton de l’exemple en utilisant un lien html <a> et un élément spanqui contient un caractère spécial en HTML. Toujours en respectant  les effets de transition.

Reproduisez le quatrième bouton de l’exemple en utilisant un lien html <a> et en respectant  les effets de transition. Veillez à cliquer sur le lien pour observer la totalité des effets.

Reproduisez le cinquième bouton de l’exemple en 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. Veillez à cliquer sur le lien pour observer la totalité des effets..

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.