Joomla! Extensions Directory. FavThemes. W3Schools. Webdesign-tutoriaux.com. Alsacréations. CSS3 Generator. Tuto bouton animé. Pour le tuto du soir, nous allons faire très simple et rapide (la fin de la semaine approche, ceci explique peut être cela).
Ce que nous allons réaliser est un simple bouton graphique que nous allons utiliser pour un lien. Mais nous voulons 3 apparences différentes : Bouton inactifBouton activéBouton survolé Et bien c’est très simple avec encore une fois les feuilles de styles. Ce dont nous allons avoir besoin : Une image du bouton, mais avec une petite particularité, nous allons empiler les différents états dans l’image. Voila donc l’image : Et voici le code à appliquer pour faire fonctionner notre bouton : Il suffit en fait de créer une class bouton comportant trois états : l’état standard a.bouton, l’état survolé a.bouton:hover et l’état cliqué a.bouton:active.
Le deuxième état est activé au survol du bouton, et nous allons en réalité afficher la même image, mais décalée de 23 pixels vers le bas, d’où le -23px. Exemple disponible ici.