Créer des boutons (facilement) pour votre site web 01
Voici une façon parmi tant d'autres, de faire des boutons "rollover" pour votre site. Un "rollover" est un bouton qui "change d'état" ou qui réagit
lorsque l'on passe la souris dessus indiquant un lien à cliquer comme ci-dessous.
Nous allons donc créer les deux états du bouton, le premier dans son état "normal", le second lorsqu'on le survol à la souris !
Cet effet de rollover se crée dans votre éditeur de page web comme par exemple Dreamweaver - et se nomme "Image survolée".
Il nécessite deux images ayant la même taille, pour un seul bouton.

01 Commencez par ouvrir un nouveau document de la couleur du fond de votre futur page, ici noir, donc j'ai mis le noir en couleur d'arrière plan de la barre d'outils. Dans les options du nouveau document, j'ai choisi "Couleur d'arrière plan". Puis à l'aide de l'outil Rectangle arrondi tracez la forme du bouton de la couleur que vous souhaitez ! Vous pouvez bien sur choisir d'autres formes !
02 Avec l'outil Texte, écrivez le nom du bouton ici "Accueil"
03 On va donner un peu de relief à ce bouton - on double clique sur le "Calque 1" et on met un Biseautage interne, Direction : Haut. Rien ne vous empêche de mettre d'autres effet de style de calque, j'ai choisi la simplicité !
04 On fait la même chose sur le calque "ACCUEIL" mais en prenant soin de décocher l'éclairage global - sinon, le biseautage du calque 1 changera si on touche au réglage de l'Angle de l'Ombrage (petite croix dans le cercle) !!

05 Lorsque les effets de relief conviennent, on découpe ce bouton avec l'outil recadrage.

06 On fait un clique droit dans la barre grise du document et on le duplique.

07 Sur la copie du bouton, on va changer les paramètres du biseautage et inverser en quelques sortes le biseau - étant donné qu'il s'agit d'une copie il suffit juste de changer la direction du biseautage en cochant Bas.

Ces premières étapes, ont pour but de conserver les mêmes dimensions de chaque calque - en effet, le rollover étant composé de deux images l'une sur l'autre, il est préférable qu'elles aient la même taille pour qu'il n'y ai pas de décalage losrque l'on passera la souris dessus ! Voir ci-dessous ce que ça donne si elles n'ont pas la même taille : c'est pas terrible ! ...
suite ...
1 ... 2
Retour tutos divers
Accueil