32
Créer un bouton glossy et l’animer grâce à jQuery et CSS
Créer en quelques minutes un incroyable effet de fondu sur un bouton grâce à jQuery et CSS. Grâce à cet exercice vous apprendrez à créer un bouton glossy avec Photoshop (tutoriel vidéo) puis à l’animer grâce à une technique CSS et JavaScript !
Vous savez surement qu’avec CSS il est possible de créer un bouton puis de lui ajouter un effet différent lorsque la souris passe par-dessus, on appelle cela un effet hover, mais saviez vous qu’en ajoutant la librairie JavaScript jQuery vous pouviez également créer un effet de fondu entre l’état inactif et l’état hover ? Cet effet est vraiment saisissant et surtout très simple à mettre en place. Aujourd’hui je vous propose de suivre cet exercice pour comprendre comment utiliser et comment créer cet effet.
Cet exercice s’adresse avant tout aux webmasters ayant déjà des connaissances dans Photoshop mais surtout dans la création de sites internet (HTML, CSS).
Mais avant toute chose, cliquez sur le lien ci-dessous pour avoir un aperçu du résultat final :
Cliquez ici pour voir une démonstration
Pour télécharger les fichiers sources rendez-vous en bas de cette page.
Commencer le tutorial
Ce tutoriel se compose en deux grandes parties, la première consiste à créer le bouton glossy sous Photoshop, tandis que la seconde porte sur la création du HTML, du CSS et du Javascript.
Pour passer rapidement la première étape j’ai créé une vidéo expliquant comment créer le bouton glossy avec Photoshop. Vous pouvez la visionner en cliquant sur le lien ci-dessous. De plus je vous rappelle que de nombreux tutoriaux Photoshop ont déjà été publiés sur le sujet de la création de reflets et d’effets glossy, sur wks.fr. Cliquez sur ce lien pour découvrir quelques exemples : http://www.wks.fr/recherche.php3 ?recherche=glossy
Tutoriel Photoshop
jQuery et CSS / ETAPE 1
Vous devez commencer par créer un dossier qui contiendra tous vos futurs fichiers, vous pouvez l’appeler par exemple « bouton » puis dans ce dossier créez plusieurs sous dossiers : /css, /images et /javascript.ETAPE 2
Ensuite ouvrez votre éditeur HTML (comme dreamweaver) puis créez un nouveau fichier .html et enregistrez-le dans le dossier « bouton » sous le nom index.html. Ensuite créez un nouveau fichier .css et enregistrez-le dans le dossier /css sous le nom styles.css.ETAPE 3
Explorez le dossier /css puis créez un nouveau dossier /images, placez à l’intérieur de ce dossier l’image de votre bouton en deux états (inactif et hover) créés lors de la première étape de ce tutoriel.ETAPE 4
Dans votre fichier index.html vous allez créer un lien hypertext (balise a) qui sera entouré par les balises p, voici un exemple de codes que vous devez obtenir :
<p class="cta-button"><a href="#">Sign Up</a></p>
Il est important de conserver la classe cta-button dans la balise paragraphe p, c’est grâce à cette classe que l’effet est possible, concernant le texte du lien, vous pouvez le modifier comme vous le souhaitez en sachant que d’une manière ou d’une autre il ne sera pas visible à l’écran !
ETAPE 5
Puis afin de pouvoir travailler sur le JavaScript et le CSS vous devez importer ces fichiers dans l’index.html, pour se faire copier puis coller ces quelques lignes entre les balises de votre fichier index.html :
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/cta-javascript.js"></script>
ETAPE 6
Vous aurez peut être compris ce qu’il faut faire maintenant ? Vous avez importé des fichiers JavaScript qui n’existent pas, pour le moment, téléchargez le fichier en bas de page puis copier / coller les deux fichiers jquery-1.3.2.min.js et cta-javascript.js dans le dossier /javascript.ETAPE 7
Vous devez maintenant ajouter les styles qui permettront de mettre en page votre bouton. Ouvrez donc votre fichier styles.css dans votre éditeur HTML puis copiez et collez le code ci-dessous :
.cta-button {
display:block;
width:200px;
height:53px;
background:url(images/button.jpg) no-repeat 0 -53px;
margin:0 auto;
}
.cta-button a {
display:block;
width:100%;
height:100%;
background:url(images/button.jpg) no-repeat 0 0;
text-indent:-9999px;
}
.cta-button a:hover {
background-position: 0 53px;
}
La classe .cta-button définit les styles généraux du bouton mais surtout le style lorsque la souris et l’animation sont terminés, il est intéressant de remarquer que l’effet n’est pas appliqué dans :hover mais bel et bien dans la première classe !
Normalement aucune partie de ce css ne devrait vous poser de problèmes de compréhension, si ce n’est pas le cas, vous pouvez poser vos questions dans les commentaires de cet article.
ETAPE 8
Vous pouvez tester votre fichier index.html et normalement l’effet fonctionne automatiquement, si ce n’est pas le cas, vérifiez que vous avez bien fait toutes les étapes décrites ci-dessus.Maintenant comment cela se passe ? en fait dans le fichier cta-javascript vous avez un code qui exploite les effets de jQuery pour créer un effet de transition entre la classe cta-button et l’état du lien a. Voici le code correspondant à l’effet :
$('p.cta-button a')
.css({ 'backgroundPosition': '0 0' })
.hover(
function(){
$(this).stop()
.animate({
'opacity': 0
}, 500);
},
function(){
$(this).stop()
.animate({
'opacity': 1
}, 500);
}
);
Magique ! en fait il s’agit simplement d’un effet de transparence complet à un empilement du paragraphe sur le bouton a ! Simple mais ingénieux 
Voila, ce tutoriel est maintenant terminé, n’hésitez pas à vous amuser avec ce code, il offre de belles possibilités de modifications.
Si vous avez des questions, n’hésitez pas à utiliser les commentaires.
Merci d’avoir lu mon nouvel article sur Wks.fr, si vous avez aimé ce tutoriel, n’oubliez pas de nous suivre sur notre flux RSS (http://feeds.feedburner.com/WksTutoriauxPhotoshop) ou encore sur mon compte twitter (http://twitter.com/WonkaStudio).
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 10 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
20 avril 2010 17:30, par Jocelyn
Très bon tutoriel comme toujours Wonka. Cependant, et sans aucun rapport, j’aimerai te proposer quelque chose. Lorsqu’on écrit un commentaire, il y a une fonction javascript qui efface la value du input lors d’un onclick, sauf que du coup si on veut juste corriger une faute par exemple Jocelun au lieu de Jocelyn, et bah lors du onclick, tout s’efface. Ceci n’est pas très ergonomique. Alors je te propose une solution :
HTML :
JAVASCRIPT : function change_value(id, valeur) var obj = document.getElementById(id) if (obj.value == valeur) obj.value = « » else if (obj.value == « ») obj.value = valeur
Voilà, à toi de voir si cela te plait. Bonne continuation à toi !
Répondre -
16 décembre 2010 17:01, par Quibbler
Bonjour,
j’ai une question comment fait ton pour fair plusieurs bouton avec cette effet ??
Merci !
Répondre -
21 janvier 2011 14:25, par Nicolas L
Bonjour, j’ai installé deux boutons différents sur une pagesans problème, mais le troisième ne fait pas une transition douce ? j’ai trois classes css différentes (1 par bouton). Il n’y a pas de différence dans le code si ce n’est le nom et l’image. Merci.
Répondre -
16 mai 2011 21:47, par matista19
Merci pour se tuto mais quelqu’un serai comment faire pour faire se meme effet mais avec du texte ecrit dans le a href, car j’arrive pas a trouver comment faire pour l’effectuer le hover en js masque le texte si quelq’un a une solution je suis preneur Merci
Répondre -
17 mai 2011 21:04, par matista19
Bonsoir escusez moi, mais j’aimerai savoir si c’est possible d’afficher le meme résultat mais en gardant le texte parceque moi sa marche mais on ne voit plus le texte, si quelq’un peu m’aider sa serai super merci =)
Répondre -
2 juillet 2011 21:42, par christine
Merci beaucoup pour votre tuto il est vraiment très intéressant j’admire votre site bravo !
Répondre
merci pour le tuto !
