Aujourd’hui, il y a plein de façons de créer des jolis boutons dans le style Web 2.0. La plus simple est de créer 2 boutons avec 2 styles (un standard et un survolé), mais dans ce cas vous devez créer autant d’images que de boutons avec des textes différents.
Pour simplifier la chose, il y a le CSS qui permet d’avoir une image de fond et du texte par dessus. Mais là ou ça se corse, c’est si on veut un bouton avec des bords arrondis (en attendant le CSS v3).
Ma méthode c’est de diviser le boutons en 3 parties (image avec bords arrondis à gauche, texte au centre avec image qui se répète en CSS, image avec bords arrondis à droite) et de faire le reste avec du javascript.
Pour commencer, lancez Photoshop et charger les styles suivants:
Boutons Style WEB 2.0. Il ne vous reste plus qu’à créer un rectangle aux bords arrondits. Enregistrer votre image et afficher la dans une page Web pour voir le résultat.
Vous trouverez plus d’explications via ce tutoriel.
Maintenant, si vous souhaitez obtenir un effet de reflet, vous pouvez soit utiliser Photoshop (cf tutoriel suivant), soit utiliser la librairie javascript mootools. Nous allons utiliser cette dernière, pour cela ajouter le code suivant à votre page:
<div class='noteclassic'> <script language="javascript" type="text/javascript" src="js/mootools.js"> </script> <script language="javascript" type="text/javascript" src="js/reflection.js"> </script> <img class="reflect" src="votre_image.jpg"/> </div>
Les fichiers javascript étant disponibles ici:
– http://ynizon.free.fr/documents/boutons_web2/mootools.js
– http://ynizon.free.fr/documents/boutons_web2/reflection.js
Rafraichissez la page, vous devez visualiser l’effet reflet. Faites la touche « imprime écran » sur votre clavier, puis coller le résultat dans Photoshop.
Faite la découpe en 3 images. Pour la partie centrale, vous pouvez utiliser « l’outil rectangle de sélection 1 colonne ».
Refaites la même manipulation avec un autre style pour avoir le style survolé.
Maintenant, il ne vous reste plus qu’à déclarer cette feuille de style et ce javascript dans votre page.
Et à coller le code suivant:
Faites attention, à ne pas avoir le même id pour chaque lien .
Tous les fichiers nécessaires se trouvent à cette adresse:
http://ynizon.free.fr/documents/boutons_web2/
<div class='noteclassic'>
<link rel="stylesheet" type="text/css" href="css/style_web2.css" media="screen" />
<script language="javascript" type="text/javascript" src="js/rollover_functions.js">
</script>
<!-- MENU
Le menu appelle des fonctions de rollover, il faut que chaque id du lien <a> soit different
Le prechargement permet d'afficher le rollover instantenement
-->
<div style="display:none" name="prechargement">
<img src="images/B_BarreGauche2.jpg"/>
<img src="images/B_Barre_Reflet2.jpg"/>
<img src="images/B_BarreDroite2.jpg"/>
</div>
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<a id="B_MONBOUTON" href="" title="MON BOUTON" onmouseover="buttons_roll(this,'true')" onmouseout="buttons_roll(this,'false')" >
<div class='bouton_standard' name='img_centre' >
<img name='img_gauche' src='images/B_BarreGauche.jpg'/>
<span class='bouton_texte' >
MON BOUTON
</span>
<img name='img_droite' src='images/B_BarreDroite.jpg' />
</div>
</a>
</td>
</tr>
</table>
</div>
