Blog iamvdo.meTutoriel
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 :
<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é dont la syntaxe est la suivante :
p{
...
background: #444;
background: linear-gradient( #555, #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 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 :
p{
...
border-radius: 8px;
}
Les effets de lumière pour plus de réalisme
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é.
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 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%.
p{
...
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5),
0 -1px 0 rgba( 255, 255, 255, 0.4);
}
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 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 :
p:hover{
color: #222;
background: #555;
background: linear-gradient( #777, #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 également 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: linear-gradient( #555, #2C2C2C);
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 2012
c’est vraiment magnifique vos tutos ;et aussi css3.
merci
#22par charly, le 13 janvier 2012
Escellent tutoriel ! Merci bcp !
#23par dergen, le 15 janvier 2012
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 2012
.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 2012
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 2012
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 2012
merci pour cette demo
#28par navalex, le 14 mai 2012
Super tuto mais je voudrait savoir ou mettre le lien sur lequel on veut que sa nous enmene ?
#29par CresusDigit, le 2 juin 2012
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 2012
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 2012
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 2012
Très belle effet !
#33par Nino, le 23 juillet 2012
Parfait, rapide et bien expliqué. Un grand merci.
#34par junius, le 16 août 2012
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 2012
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 2012
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 2012
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 2012
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.
#39par Kae, le 31 janvier 2013
Superbe tutoriel. Tout y est parfait. Le bouton présenté et la présentation en elle même. L’organisation des différentes techniques utilisée est très claire et le résultat formidable. Webmaster depuis plus de 10 ans, je vois rarement des explications aussi claires. Bravo je vais perdre un peu de temps sur le reste du site...
#40par louizon, le 25 février 2013
Bonjour , merci pour se super tuto ! Une seule chose me chagrine, avec cette façon de procéder , le bouton n’est pas une image, et je n’arrive pas a trouver le code HTML qui va bien pour lui appliquer un lien ! pouvez vous m’aider ? merci d’avance pour vos réponses constructives !
#41par serge louo, le 26 février 2013
je suis vraiment très ravis d’avoir lu ce tuto
chapeaux a vous !!!
#42par sabrina, le 28 mars 2013
Merci bcp pour ce formidable tuto ça m’a vraiment aidé.
#43par soufiane , le 28 mars 2013
un grand merci pour ce petit tuto
#44par dounou, le 28 avril 2013
Merci pour ce tuto simple et facile à prendre. Grâce à celui-ci, j’ai pu améliorer le design de mon site.
#45par Wess, le 23 mai 2013
Grand grand merci a vous.
#46par Guigui, le 30 mai 2013
Ce tuto est génial. Il est clair, net, précis.
#47par Enzo, le 19 juin 2013
En un mot : PAR-FAIT !!! :D
#48par Dudu, le 20 juin 2013
Merci beaucoup ! Je suis développer web et j’ai pas mal de lacune en css3 grâce à ce tuto je comprend mieux les mécanisme et surtout je fais des boutons plus classés et réalistes ! Merci !!!
#49par Alterre, le 7 août 2013
Très bon tutoriel, merci !
#50par Majohnc, le 29 août 2013
l’aisance dans l’explication de ce tutoriel le place dans les tops de mes choix.merci !
#51par Stanislas, le 26 novembre 2013
Merci pour cet excellent tuto. C’est bluffant.