Pour recevoir les prochains articles
Abonnez-vous à la newsletter pour recevoir les prochains articles (un email contenant un lien de confirmation vous sera envoyé, nécessaire pour lutter contre le spam) :
Comment créer un bouton en CSS et HTML
Créer un bouton étape par étape
Cet article à pour but de vous apprendre vraiment à créer des boutons facilement en HTML et CSS. Donc, si vous n'y connaissez rien, il est important de lire l'article dans son ensemble, étape par étape, pour comprendre vraiment comment ça fonctionne car ce que vous pouvez apprendre dans cet article pourra vous serir pour bien plus de choses encore que la création d'un simple bouton.
Dans cet article j'essaye de donenr des explications courtes, pour me concentrer uniquement sur l'essentiel.
Utiliser du CSS & HTML sur WordPress et Blogger
Je pars du principe que ce tutoriel est pour ceux qui n'y connaissent rien au langage CSS et HTML. Donc je vais vous dire rapidement comment on utilise du CSS et du HTML sur Blogger et WordPress (désolé pour les personnes qui utilisent un autre outil pour gérer leur site, je n'ai pas tout testé).
Pour Wordpress:
Pour intégré du code CSS dans WordPress, rendez-vous dans votre Manager puis dans "Apparence" et "Éditeur". Normalement vous attérissez sur la page (feuille de style) "style.css". Ensuite vous pouvez ajouter vos codes CSS à la suite des autres codes que vous pouvez voir sur cette fameuse page.
Pour utiliser du HTML lorsque vous rédigez un article, il vous suffit de cliquer sur l'onglet "Texte" dans votre éditeur de... texte.
Note importante: lorsque l'on met à jour un thème WordPress on perd les codes CSS que l'on a ajouté soi-même, donc n'oubliez pas de sauvegarder les codes que vous ajoutez, par exemple dans un Bloc Note, avant chaque mise à jour de votre thème. Une fois la mise à jour faite il vous suffit de remettre les codes CSS en place à l'aide d'un simple copier/coller.
Pour Blogger:
Avant toute modification du design d'un blog créé avec Blogger, il est important de faire une sauvegarde. Pour ce faire il faut aller dans le manager de son blog puis dans "Modèle" et "Sauvegarder/Restaurer" en haut à droite. Ça permet de sauvegarder son design puis de le remettre en place d'un simple clic en cas d'erreur de manipulation.
Pour ajouter un code CSS sur Blogger, il suffit d'aller dans "Modèle" puis "Personnaliser" puis "Avancer" et enfin "Ajouter le fichier CSS", et ensuite vous pouvez ajouter vos codes CSS dans le champ blanc prévu à cet effet.
Puis pour utiliser du HTML dans un article Blogger, il suffit de se rendre dans l'éditeur de texte et de cliquer sur l'onglet "HTML".
Un premier bouton très simple, qui change de couleur au passage de la souris
Pour commencer on va faire un bouton très simple...
Code CSS:
a.bouton1 { padding: 10px 30px; background: blue; color: white; } a.bouton1:hover { background: red; }Code HTML:
<a href="http://www.adresse-de-votre-choix.com/" class="bouton1">Bouton 1</a>
Résultat:
(Survolez le bouton avec votre souris)
Bouton 1
Explications:
L'attribut "padding" permet de créer une marge entre le texte et les bords du bouton. On peut régler la taille des marges comme bon nous semble en remplaçant "10" par le nombre de notre choix pour la hauteur (marge en haut et en bas), et "30" par le nombre de notre choix pour la largeur (marge à gauche et à droite).
On peut également choisir la couleur de fond de notre choix en remplaçant le nom d'une couleur par une autre, mais toujours en anglais, par exemple on peut remplacer le code css: "background: blue;" par "background: yellow;" si on veut une couleur de fond jaune. On peut également changer la couleur du texte en modifiant la couleur de l'attribut "color:".
Enfin, le sélecteur ":hover" permet de donner des indications au navigateur pour que le bouton change d'aspect au passage de la souris et ainsi pour lui donner un effet plus dynamique.
Jouer avec une palette de couleur plus élargie, changer la taille du texte et le mettre en gras
On va garder la même base que le bouton ci-dessus, mais cette fois-ci on va utiliser des codes de couleur pour avoir plus de flexibilité. On va également voir comment on peut grossir la taille du texte, et on peut également le mettre en caractères gras.
CSS:
a.bouton2 { padding: 15px 40px; background: #46a28d; color: #FFFFFF; font-weight: bold; font-size: 18px; } a.bouton2:hover { background: #570906; color: #5EB6DD; }HTML:
<a href="http://www.adresse-de-votre-choix.com/" class="bouton2">Bouton 2</a>
Résultat:
Bouton 2
Explications:
Premièrement, j'ai un peu modifié les valeurs de l'attribut "padding", juste pour faire un exemple, ça m'a permis de changer la taille des marges autour du texte.
Ensuite, vous remarquerez donc qu'il n'y a plus les couleurs en anglais (blue, red, etc...), à la place j'ai utilisé des codes de couleur. Ce qui me permet d'avoir accès à une palette beaucoup plus large (plus de 16 millions de couleurs différentes), plutôt que de se limiter aux couleurs "classiques" disons. Pour trouver ces codes de couleur, ce n'est pas bien compliqué, il suffit de taper "codes de couleur" sur internet et on trouve tout un tas de site qui les référencent (exemple: http://www.code-couleur.com/palettes.html qui en propose quelques'unes parmi tant d'autres) ou qui proposent des outils pour les trouver facilement.
Chaque code de couleur doit être précédé d'un dièze ("#").
Comme vous pouvez le voir, j'ai également ajouté deux nouveaux attributs:
- "font-weight" : accompagné de la valeur "bold". Ce code permet de mettre le texte en gras (Il y'a d'autres choses à dire au sujet de cet attribut, mais pour aujourd'hui on va rester dans la simplicité).
- "font-size" : accompagné de la valeur "18px". Ce code permet de grossir ou de réduire la taille du texte, on peut jouer avec le nombre (11, 12, 13, etc...)
Personnaliser les bordures du bouton
Maintenant on va voir comment on peut personnaliser un peu plus le bouton à l'aide du css, plus précisemment les bordures du bouton.
CSS:
a.bouton3 { padding: 10px 30px; background: #FC7F3C; color: #000000; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; border: 2px solid #46a28d; } a.bouton3:hover { background: #34393E; color: #5EB6DD; }HTML:
<a href="http://www.adresse-de-votre-choix.com/" class="bouton3">Bouton 3</a>
Résultat:
Bouton 3
Explications:
L'attribut "border-radius" permet d'arrondir les angles du bouton, je lui ai donné la valeur "11px" mais on peut bien entendu changer le nombre, on peut très bien mettre "20px" ou autres...
Comme vous pouvez le voir dans le code CSS ci-dessus, j'ai inscris trois fois l'attribut "border-radius", deux de ces trois attributs comportent un préfixe: "-webkit-" et "-moz-". Le préfixe "webkit" permet de s'assurer que le code sera bien pris en compte par Chrome, Safari et Android. Le préfixe "moz" permet de s'assurer que le code sera bien pris en compte par Mozilla. En gros, cela permet de s'assurer qu'un maximum de navigateurs affichent les bordures arrondies, ils choisieront la ligne de code à prendre en compte sur les trois et ignoreront les deux autres, il existe encore d'autres préfixes de ce genre mais les autres sont rarement utilisés. (J'ai du mal à expliquer réellement l'utilité de ces préfixes... j'ai encore des progrès à faire, donc si un expert passe dans le coin qu'il n'hésite pas à me donner une petite leçon par commentaire)
J'ai également ajouter l'attribut "border", suivi des valeurs "2px solid #46a28d". C'est donc cette ligne de code qui me permet d'afficher une bordure... qui fait donc une taille de 2px et qui affiche la couleur correspondante au code. La valeur "solid" permet de signaler au navigateur que l'on veut afficher une bordure spécifique, dans notre cas une bordure "solide". Mias on peut également remplacer "solid" par "dashed" si on veut que notre bordure soit composé de tirets, ou par "dotted" si on veut qu'elle soit composée de pointillés. Il existe d'autres types de bordures, mais ils ne sont pas toujours afficher comme on le souhaite par les navigateurs, puis on va éviter de rentrer trop dans les détails pour rester concentrer sur le sujet de cet article, c'est à dire la création d'un bouton sympa.
Donner un effet de transition lors du passage de la souris
On va continuer de pousser toujours un peu plus loin la personnalisation de notre bouton, cette fois-ci on va lui donner un petit effet de transition sympa lorsque le visiteur survol le bouton avec sa souris, plutôt que d'avoir un changement de couleur "brutal".
CSS:
a.bouton4 { padding: 12px 50px; background: #C9001A; color: #FFFFFF; -webkit-transition: all 1.8s ease-out 0s; -moz-transition: all 1.8s ease-out 0s; transition: all 1.8s ease-out 0s; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 4px dashed #000000; } a.bouton4:hover { background: #8FCF3C; color: #000000; border: 4px solid #34393E; }HTML:
<a href="http://www.adresse-de-votre-choix.com/" class="bouton4">Bouton 4</a>
Résultat:
Bouton 4
Explications:
J'ai donné un effet de transition - avec l'attribut... "transition" - volontairement "long" (1,8 seconde) pour que vous puissiez bien voir l'effet donné. On peut donc jouer avec le temps de cet effet de transition, le choisir plus court ou encore plus long.
Là encore, j'ai utilisé les deux préfixes "-webkit- et "-moz-" pour m'assurer que la transition soit prise en compte par un maximum de navigateurs.
Créer un bouton avec deux images
Maintenant on va voir comment on peut créer un bouton à l'aide d'une image de base et une autre image qui s'affiche lors du passage de la souris.
CSS:
a.bouton5 { display: block; width: 150px; line-height: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL6nVN2BwkGnD8PUaDl8wlB7VEff_PyWteWOL4H_TJCpJseHKd65ncRi4OPLnGdzeZAZFDy31c8wXCUOpNe7JrMM3AAulkFTCQhi78AsBZKlh4vrunnj6skOzpJ8rzqDBobNmrhkJEQUc/s1600/bouton-orange.png); color: #000000; -webkit-transition: all 0.7s ease-out 0s; -moz-transition: all 0.7s ease-out 0s; transition: all 0.7s ease-out 0s; font-weight: bold; text-align: center; } a.bouton5:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho-4v08yC7oE7HLFWCr2loGaM_DujSdqbhe-sedmr5JjmH0H0FG9yUEyw06Nkl2r6Y23aIwSAbLJGzEW0KWW0JBss4eivTcY7fv7d08FWcCkx9AehD4KL0SExFF0SW26gC_VvAX4i8RLw/s1600/bouton-orange2.png); color: #ffffff; }HTML:
<a href="http://www.adresse-de-votre-choix.com/" class="bouton5">Bouton 5</a>
Résultat:
Bouton 5
Images utilisées:
 |
| Image 1 |
 |
| Image 2 |
Explications:
Premièrement, j'ai rajouté l'attribut "display" suivi de la propriété "block". Grâce à ce code, je vais pouvoir définir une longueur et une largeur pour mon lien et donc son arrière plan.
Ensuite, j'ai rajouté l'attribut "width" suivi de la valeur "150px", ça me permet de définir la longueur de mon lien et ainsi de l'image d'arrière plan. L'image que j'utilise fait donc 150px de longueur.
J'ai également ajouté l'attribut line-height suivi de la valeur "40px" pour définir la hauteur de mon lien, car la largeur de mon image est de 40px.
Comme vous pouvez le voir, j'ai également retiré l'attribut "padding" que j'utilisais depuis le début de ce tutoriel, car celui-ci ne sert plus à grand chose dans notre cas.
J'ai également supprimé le code de couleur de l'arrière plan, pour le remplacer par une image avec la propriété url('http://adresse-de-mon-blog.com/ma-image-premiere-image.png'). Ce code me permet donc de faire appel à une image, pour que celle-ci s'affiche, et j'ai également répété ce procédé par la suite dans mon deuxième code mais cette fois-ci avec l'url de ma deuxième image.
Enfin, j'ai rajouté l'attribut "text-align" suivi de la valeur "center", ce qui me permet de centrer le texte du bouton dans l'image.
Conclusion
Je pourrais encore pousser le sujet... il y a plusieurs solution pour créer un bouton à l'aide du HTML et du CSS, et de le personnaliser à sa guise. Mais je préfère m'arrêté là pour le moment car je pense qu'il ne faut pas non plus donner trop d'infos d'un coup pour éviter de se perdre, et puis en plus je ne suis pas forcément très doué pour tout expliquer... d'ailleurs si vous connaissez bien le CSS et que vous voyez que je me suis mal exprimé à certain moment vous pouvez réagir par commentaire toutes les critiques seront les bienvenues.
Votre avis compte beaucoup
J'espère que cet article sera utile pour quelques personnes. Et si c'est le cas, si l'article vous a été utile, n'hésitez pas à laisser un petit commentaire en retour. N'hésitez pas également à poser des questions ou à donner votre avis. :)
L.Tristan
J'ai 27 ans, je crée des sites depuis 2013 et je m'intéresse à tout ce qui peut me faire gagner de l'argent et je partage mes découvertes ici, sur empocher.net. N'hésitez pas à me contacter si vous avez des questions. :)
Abonnez-vous à la newsletter pour recevoir les prochains articles par email (un email contenant un lien de confirmation vous sera envoyé, nécessaire pour lutter contre le spam):
Super
RépondreSupprimer