Découvrez comment créer des boutons attractifs pour votre site web !
Votes : environ (100%) 1 vote

Aujourd’hui, vous allez découvrir divers méthodes pour créer des boutons attractifs pour votre site web en utilisant tas de méthodes !

Que ce soit des boutons pour des formulaires (Newsletter, Contact…), des boutons pour pousser le visiteur à y cliquer  ou des boutons que vous pouvez les utiliser pour la navigation de votre site…

Vous allez voir comment faire cela en utilisant des solutions en-ligne (sans téléchargement, sans installation), en utilisant le CSS et en utilisant quelques logiciels…

Vous allez aussi apprendre comment choisir la couleur et le style des boutons de votre site web, comment créer des boutons sans images et avec des images.

Allons-y !

Tutoriel :

D’abord, un bouton est tout simplement un lien, ou l’en utilise pas un texte, mais on utilise souvent des images et des styles CSS.

Avant de commencer, je vous conseil de savoir au moins le langage HTML, c’est le langage principal du web, sinon, j’ai mit les codes en détail pour que tout le monde puisse comprendre :)

Notez bien que le CSS permet d’améliorer la mise en page, parceque l’HTML a ses limites, c’est un complément et les deux sont des langages de balisage. Le navigateur lit la balise et son contenu et l’affiche.

Alors, ne vous inquiétez pas si vous ne connaissez pas grand chose sur le CSS et l’HTML ! J’ai créé un vidéo (en dessous) juste pour vous !

Commençons par le premier type de boutons.

Créer un bouton en utilisant des images :

L’avantage principal de cette méthode c’est que votre bouton va être le même  dans tous les navigateurs, avec le même design, car vous allez utiliser une image pour cela, donc on va pas utiliser beaucoup de CSS.

Pour la création de ce genre de boutons, on va créer une image premièrement, et ensuite on va utiliser le CSS pour mettre l’image en arrière plan d’un lien.

Voici premièrement comment créer l’image d’arrière plan du bouton, vous pouvez utiliser n’importe quel programme de graphisme, cependant, je vous conseil d’utiliser soit le Photoshop soit le Photofiltre.

Comment créer l’image du bouton en utilisant PhotoShop :

Personnellement, j’utilise souvent le photoshop pour créer des boutons que l’on peut pas les créer en utilisant le CSS, par exemple, si vous voulez utiliser un font que l’on peut pas trouver dans tous les navigateurs, alors, il est recommandé d’utiliser une image comme arrière plan, sans utiliser du Javascript (Je vais expliquer cela dans un nouveau tutoriel) ou du Jquery.

Avec le photoshop, vous pouvez créer un logo qui va hypnotiser vos visiteurs !

Voici quelques exemples de logos que j’ai créé en 10 minutes :

Comment insérer le logo dans la page de votre site web :

Vous pouvez le mettre en tant qu’image, mais il est recommandé d’utiliser la méthode CSS pour afficher le bouton.

Voici le code HTML :

[html]<a href= »http://bit.ly/rfxbTz » class= »bouton »></a>[/html]

Et voici le code CSS pour définir le style du bouton (l’arrière plan, hauteur…) :

[css] .bouton {

width:180px; //pour définir la largeur (utilisez la même largeur que l’image)
background:url(LE-LIEN-VERS/VOTRE-IMAGE.png) center no-repeat; //pour définir l’arrière plan de votre bouton
height:40px; //pour définir la hauteur

display:block; // indispensable pour dire que le <a> doit être cliquable dans tous les côtés du bouton

}[/css]

Et si vous voulez créer un bouton qui se charge rapide, un bouton qui marche avec tous sortes de texte, vous pouvez utiliser le CSS, mais notez bien, que il existe des navigateurs comme le IE 6 :evil: qui ne se comporte pas de la même façon que les navigateurs d’Aujourd’hui…

Comment créer un bouton en utilisant le CSS :

D’abord, c’est la méthode que j’utilise dans ce site web, cette méthode est très efficace pour charger les pages plus rapidement, c’est la méthode utilisé par les grands sites web, comme Youtube, Google, Facebook, Twitter…

Voici le code HTML :

[html]<a class= »bouton » href= »http://bit.ly/rfxbTz »>easytutoriel.com</a>[/html]

Voici le code CSS avec des commentaires :

[css].bouton {
border-top: 1px solid #f79797; //pour ajouter une bordure en haut
background: #f00000; //pour changer l’arrière plan
padding: 6px 12px; //pour ajouter un espace intérieur dans le bouton
-webkit-border-radius: 8px; //pour créer des bordures rondus (navigateur : Google Chrome et d’autres)
-moz-border-radius: 8px; //pour créer des bordures rondus (navigateur : FireFox et d’autres)
border-radius: 8px; //pour créer des bordures rondus (navigateur : La plupart)
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; //pour ajouter un ombre en dessous du bouton (navigateur : Google Chrome et d’autres)
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0; // pour ajouter un ombre en dessous du bouton (navigateur : Google Chrome et d’autres)
box-shadow: rgba(0,0,0,1) 0 1px 0; // pour ajouter un ombre en dessous du bouton
text-shadow: rgba(0,0,0,.4) 0 1px 0; // pour ajouter un ombre en dessous du bouton
color: white; // la couleur
font-size: 21px; // la taille du font
font-family: Georgia, serif; // pour définir la police
text-decoration: none; // pour enlever le souligné
vertical-align: middle; // pour centrer le texte
}
.bouton:hover { // les propriétés du bouton si vous placez la souris sur ce dernier
border-top-color: #ff0000;
background: #ff0000;
color: #f0f0f0;
}[/css]

Vous pouvez bien-sûr supprimer des lignes dans le code et modifier les variables selon votre besoin, comme la couleur de l’arrière plan, enlever l’effet d’ombre du texte ou bien enlever les bordures.

Voici un vidéo tutoriel :

Sinon, voici une autre méthode plus facile !

Créer un bouton en utilisant des sites en-ligne :

Si vous ne connaissez pas grand chose sur la création des sites web, cette méthode est la plus facile, car cette méthode va vous permettre de créer votre bouton en 2 clics et sans installer aucun programme dans votre ordinateur.

Mais n’oubliez pas, que vous n’aurez pas la liberté totale en ce qui concerne la création de votre bouton, car on vous propose des solutions prêtes et des thèmes bien précis.

Da Button Factory

Da Button Factory vous propose des outils pour créer un très bon bouton pour votre site web. Vous pouvez varier la taille du bouton, l’ombre du texte, le style, les couleurs et le type de sortie (PNG / JPEG / GIF /ICO).

Pour faire les modification, cliquez sur le bouton de mise-à-jour. Quand c’est fait, vous pouvez cliquer sur le bouton pour le télécharger.

Visitez Da Button Factory en cliquant ici : http://dabuttonfactory.com

Button Maker

Button Maker est un outil gratuit qui permet de générer les codes CSS pour vos boutons. Vous avez accès à des couleurs différentes pour les différentes parties du bouton.

Vous pouvez également modifier la taille et la forme du bouton que vous pouvez voir sur la gauche. Pour obtenir le code, vous cliquez sur le bouton.

Visitez Button Maker en cliquant ici : http://css-tricks.com/examples/ButtonMaker

Conclusion :

Il existe d’autre méthodes, comme le flash et le Javascript…

Cependant, ces derniers ne sont pas compatibles pour des navigateurs et notamment pour les mobiles et l’Iphone (3).

Je vous conseil d’utiliser le CSS pour créer les logos de votre site web, ou bien la méthode de photoshop et utiliser une image.

Si vous avez rencontré des problèmes durant la création de vos boutons, n’hésitez pas à me le demander.

Soufiane – Easytutoriel.com