Dans ce tutoriel, nous allons utiliser différentes techniques CSS qui vont par exemple nous permettre de réaliser un bouton, sans utilisation d’images. Ces techniques sont utilisables sur tous les éléments d’une page web : C’est parti !
Tout d’abord, commençons par le code HTML nécessaire. Dans cet exemple, un simple paragraphe suffit :
Appliquons-lui quelques styles par défaut : une taille, une police, une couleur, un alignement.
Vous devriez donc obtenir ceci :
J’y viens, j’y viens. Commençons tout d’abord avec un dégradé dont la syntaxe est la suivante :
Ici nous appliquons donc un dégradé partant du haut vers le bas, avec un gris #555 en haut et un gris #2C2C2C en bas.
Je laisse volontairement la valeur background: #444 pour la dégradation gracieuse dans les navigateurs trop ancien.
Voila donc le résultat :
Continuons notre CSS avec les coins arrondis. Pour cela, rien de plus simple, ajoutez simplement la déclaration border-radius :
Pour ajouter un peu de volume et de réalisme, nous allons ajouter
plusieurs ombres. Tout d’abord, une ombre sur le texte lui même avec text-shadow, puis deux ombres différentes sur la boite avec box-shadow.
L’ombre du texte tout d’abord. Notre ombre sera blanche et décalée de 1px vers le bas, sans aucun flou. Cela a pour incidence la création d’un texte incrusté.
Cependant, l’effet étant un peu fort avec du blanc, utilisons plutôt la fonction rgba. Notre code CSS sera donc plutot :
Cela nous permet donc d’utiliser un blanc transparent pour un effet adouci. Vous devriez obtenir cela :
Après l’ombre sur le texte, ajoutons les ombres sur la boite avec box-shadow. Pour ce bouton, nous avons besoin de 2 ombres :
- La première derrière le bouton avec un flou de 5px, de couleur noire avec une transparence de 50%.
- La deuxième pour créer le haut du bouton est une ombre blanche avec une transparence de 40%.
Voila, l’état initial de votre bouton est terminé. Ajoutons à présent à ce bouton différents états.
Nous allons ajouter deux états différents :
-
:hover: nous allons éclaircir le dégradé. -
:active: nous allons simuler l’état enfoncé du bouton.
Tout d’abord, gestion du :hover, donc à savoir, lorsque l’utilisateur passe sa souris sur le bouton. Voici le code :
Comme dit plus haut, toutes les couleurs sont donc légèrement éclaircies. Voici l’effet :
Ensuite, pour l’effet :active, à savoir donc lorsque l’élément est cliqué, nous allons créer un effet de bouton enfoncé.
Pour cela, nous appliquons le même dégradé qu’à l’état initial mais
nous modifions également les ombres de la boite pour les appliquer à
l’intérieur, avec le mot-clé inset. Regardez le code :
Il y a également une deuxième ombre qui se trouve vers le bas du bouton. Celle-ci est blanche avec une transparence de 40%.
Et voilà l’effet :active
Le tutoriel est à présent terminé. Vous pouvez en discuter sur le forum plus bas. Bon CSS.
#1par Clotaire, le 19 février 2011
Super !
Merci pour ce magnifique tutoriel !
Vive CSS3 !!
#2par css3create, le 20 février 2011
Si ce tutoriel vous a plu, n’oubliez pas de voter pour le faire monter dans le top.
#3par christophe dumas, le 24 février 2011
Très bon tuto, bien expliqué ! Un site que je viens de découvrir, hop dans mes favoris !
Merci ! ^^
#4par Cecile23, le 24 février 2011
Merci pour tous ces détails. C’est tout simplement génial !
#5par benj, le 19 mars 2011
cool, seulement je n’ai pas réussi à voir de difference qd on clik
#6par css3create, le 19 mars 2011
@benj : tu utilises quel navigateur ?
#7par Basil Roland, le 24 mars 2011
Hello, à mon avis tu devrais inverser les "états" du bouton, c’est en :hover qu’il devrais devenir foncé non ?
#8par Pac-Side, le 22 mai 2011
Le Rendu est géniale je l’est adapter sur des Jacket des films que j’ai ajouter sur mon site, vérifier par vous même ça vaut le détour ,)http://www.pac-side.com/page2.php
#9par Mehdi, le 11 août 2011
merci pour ce tuto, très bien expliqué
#10par Ricostone, le 19 août 2011
Merci ;) Par contre c’est pas plutot padding-bottom:7px ; pour aligner verticalement ?
#11par L44, le 27 août 2011
Je suis très déçu : quand on met plusieurs boutons d’affilé , il y a un énorme espace entre , que l’on ne peut pas retirer car si on met l’élément en display inline , sa casse tout le design...
Ca aurait pu etre bien , mais perso je trouve que c’est raté
#12par Tuveuxlesavoir ?, le 27 septembre 2011
Merci pour ce magnifique tuto :)
Très riche et bien détaillé, il m’a été très pratique !
#13par Charly, le 4 octobre 2011
Encore un excellent tuto, à l’image du site :)
Pour L44, l’espace entre les boutons vient du margin de la balise p..
#14par css3create, le 4 octobre 2011
Merci @charly pour ton message !
Et oui, effectivement, le problème de @L44 est du à la marge, mais qui n’est pas présente dans le tutoriel. Elle sert juste à centrer ma démo...
#15par vandimarco, le 19 octobre 2011
Merci beaucoup pour ce super tuto ;-)
#16par Wildzone, le 26 octobre 2011
Tutoriel très complet ! bravo !
Un site qui crée des boutons CSS3 automatiquement :
http://css-tricks.com/examples/Butt...
#17par Kikimagik, le 14 novembre 2011
Un grand merci pour ce tutoriel qui permet de bien comprendre chaque étapes ! ;)
#18par Usagi, le 27 novembre 2011
Un grand bravo pour ce tuto complet ! merci de nous aider à mieux comprendre les "secrets" du CSS3.
#19par XdiZ, le 3 décembre 2011
Créer un bouton à partir d’une balise html P
ça laisse à désirer quand même ...
Sinon l’effet est sympa :)
#20par css3create, le 3 décembre 2011
@XdiZ : si tu preferes utiliser une balise
<button>, tu es libre. ;)#21par ahmed, le 2 janvier
c’est vraiment magnifique vos tutos ;et aussi css3.
merci
#22par charly, le 13 janvier
Escellent tutoriel ! Merci bcp !
#23par dergen, le 15 janvier
Bonjour,
Cette exemple ne fonctionne pas sur iPad, dommage car l’effet est sympas mais le clic ne fonctionne pas.
Sinon votre site est magnifique, encore bravo...
#24par Jisse, le 13 février
.button:hover
border-top-color : #28597a ;
background : #28597a ;
color : #ccc ;
.button:active
border-top-color : #1b435e ;
background : #1b435e ;
voici le code css
Press
Merci pour ce tuto...trés efficace
#25par Neo, le 1er avril
Génial, trop hot, quoi dire de plus, à part aux navigateurs de se grouiller le C.. et implementer les specs de CSS3 au plus vite :-)
#26par micka40, le 12 avril
Franchement c’est le top du top, c’est plus classe qu’avec des images.
Merci pour ces tutos sympathiques, complets, efficaces et surtout compréhensibles.
#27par #27, le 2 mai
merci pour cette demo
#28par navalex, le 14 mai
Super tuto mais je voudrait savoir ou mettre le lien sur lequel on veut que sa nous enmene ?
#29par CresusDigit, le 2 juin
Excellent tuto mais lorsque je le mets en pratique, je n’y arrive pas. Le texte Press demeure sous forme de texte, sans aucun effet. Testé sous Opéra, Firefox.
#30par pleug, le 3 juin
juste pour préciser qu’il faut étendre la zone cliquable à
sinon, seul le texte est cliquable. Pour ce faire rajoutez :
display:block ;
width:100% ;
height:100% ;
à
#div a
esperant avoir aidé...
#31par Philippe, le 6 juin
Bonjour, merci pour cet excellent tuto. J’ai fait quelques modifs pour améliorer le rendu de relief et ajouter une icône en background sur le coté droit du bouton. Je trouve qu’en inversant totalement les couleurs au moment du clic l’effet "d’enfoncé" est bien meilleur. Voila le résultat à l’adresse suivante : http://saintlaurentneige.fr/slnv2/i... puis clique droit sur le bouton – inspecter l’élément – et pour le nom du css : habillage.css pour voir le script. attention, ne fonctionne pas avec IE9.
Merci aussi pour votre tuto sur "l’infobulle" que j’ai aussi réutilisé sur mon site.
A+
Philippe
#32par Anonyme, le 18 juillet
Très belle effet !
#33par Nino, le 23 juillet
Parfait, rapide et bien expliqué. Un grand merci.
#34par junius, le 16 août
Bonjour et merci vraiment, pour ce tuto. J’ai commencé le html et css depuis 15 jours à peine, et même si j’avais l’intuition qu’on pouvait faire des boutons uniquement à l’aide du code css, je m’impatientai un peu d’y parvenir tout seul.
J’ai juste utilisé un span class="bouton" entre les balises p, ça me permet de dimensionner le bouton en fontion de la taille du texte. Enfin, ça m’a semblé plus pratique, mais bon, je débute.
En tous cas très bon tuto. Merci.
#35par Break, le 19 août
En effet je debute, je n’ai pas tres bien compris mais je vais chercher, et meme trouver ! :p
#36par ZeshiKun, le 28 août
Pour éviter d’avoir la couleur moche bleue sur le texte quand on clique et glisse, je pense qu’on peut laisser la balise p vide, et juste écrire dans cette balise avec un ::before ou un ::after
#37par Jacki, le 18 septembre
Mais ce tuto est très bien expliquer, mais comment on fais pour le code Css, on le met ou ? Dans la page directement ou Dans le fichier.css ? Merci de me repondre :p
#38par Yimi, le 2 octobre
Pour le centrage vertical du text, sachant qu’on défini le height, le padding-top n’est vraiment pas le mieux indiqué puisqu’il faut tâtonner pour le trouver (surtout avec un font-size en "em").
Un line-height égale au height suffit pour centrer verticalement.
Résultat :
height : 48px ;
line-height : 48px ;
Ormis ça, excellent tuto.