Souscrire
Blog iamvdo.meTutoriel
Dans ce tutoriel, nous allons utiliser différentes techniques CSS qui vont nous permettre de réaliser un bouton, sans utilisation d’images. C’est parti !
Tout d’abord, commençons par le code HTML nécessaire. Dans cet exemple, un simple paragraphe suffit :
<p>Press</p>Appliquons-lui quelques styles par défaut : une taille, une police, une couleur, un alignement.
p{
font-family:Arial,sans-serif;
font-size:1.6em;
width:200px;
height:43px;
padding-top:7px; /*permet le centrage vertical*/
text-align:center;
color:#000;
background:#444;
}Vous devriez donc obtenir ceci :
Et les nouveautés CSS3, c’est pour quand ?
J’y viens, j’y viens. Commençons tout d’abord avec un dégradé. Il faut savoir qu’au jour d’aujourd’hui, seuls Firefox basé sur Gecko et les navigateurs basés sur Webkit (Chrome, Safari ...) reconnaissent les dégradés CSS3. Internet Explorer a un filtre propriétaire mais je préfère ne pas en parler. Voir la page sur les dégradés pour toujours plus d’infos
Alors ce fameux dégradé, quelle est la syntaxe :
p{
...
background:#444;
background:-moz-linear-gradient(top,#555,#2C2C2C);
background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#2C2C2C));
}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 les navigateurs Opéra et Internet Explorer.
Voila donc le résultat :
Continuons notre CSS avec les coins arrondis. Pour cela, rien de plus simple, ajoutez simplement la règle border-radius, avec quelques petits aménagement pour navigateurs :
p{
...
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}Dans ce cas là, tous les navigateurs récents s’en sortent très bien ! Voici donc le résultat :
Du volume, du volume...
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 la bas, sans aucun flou. Cela a pour incidence un texte incrusté.
p{
...
text-shadow:0px 1px 0px white;
}Cependant, l’effet étant un peu fort avec du blanc, utilisons plutôt la fonction rgba. Notre code CSS sera donc plutot :
p{
...
text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}Cela nous permet donc d’utiliser un blanc transparent pour un effet beaucoup plus réel. Vous devriez avoir 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%.
p{
...
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
}Avec cette écriture, nous ciblons tous les navigateurs récents. Voir la page sur box-shadow pour plus détails
Vous devriez avoir cela :
Voila, l’état initial de votre bouton est terminé. Ajoutons à présent à ce bouton différents états.
Un peu d’interaction
Nous allons ajouter deux états différents :
- hover : nous allons éclaircir le dégradé.
- active : nous allons simulé 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 :
p:hover{
color:#222;
background:#555;
background:-moz-linear-gradient( top, #777, #333);
background:-webkit-gradient( linear, left top, left bottom, from(#777), to(#333));
}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 les ombres de la boite pour les appliquer à l’intérieur, avec le mot-clé inset. Regardez le code :
p:active{
color:#000;
background:#444;
background:-moz-linear-gradient( top, #555, #2C2C2C);
background:-webkit-gradient( linear, left top, left bottom, from(#555), to(#2C2C2C));
-webkit-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
-moz-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
}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 ?