Le blog d'Azork

Design, techniques et ressources gratuites pour votre site web.

Aller au contenu | Aller au menu | Aller à la recherche

Créer un bouton web avec CSS3

Ce tutoriel va vous permettre de créer facilement un bouton pour votre site web avec les nouvelles propriétés CSS3

boutonCSS3.jpg

Étape 1

Pour réaliser notre bouton, commençons d'abord par la partie HTML. Afin de pouvoir réutiliser le style de notre bouton sur une même page, nous ajouterons une classe à notre lien hypertexte

  1. <a href="#" class="bouton">Bouton</a>  

Étape 2

Maintenant que notre lien hypertexte a été créé, nous allons appliquer un style par défaut. Cela permettra aux navigateurs qui ne supportent pas CSS3 d'afficher au minimum un style basique pour notre bouton.

  1. a.bouton {  
  2.     color#666;  
  3.     fontbold 20px Arialsans-serif;  
  4.     displayblock;  
  5.     width200px;  
  6.     height40px;  
  7.     line-height40px;  
  8.     text-aligncenter;  
  9.     text-decorationnone;  
  10.     border1px solid #aaa;  
  11.     background#f8f8f8;  
  12. }  

Vous obtiendrez le résultat suivant:

boutonCSS3-etape1.jpg

Étape 3

C'est maintenant que les nouvelles propriétés CSS3 vont entrer en action! Si vous n’êtes pas familiarisé avec CSS3, je vous conseille d'aller faire un tour sur http://css3generator.com

Commençons d'abord par les coins arrondis avec la propriété border-radius. Nous utiliserons ici 6 pixels pour notre exemple.

  1. a.bouton {  
  2.     ...  
  3.     border-radius: 6px;  
  4. }  

Voici ce que vous obtiendrez:

boutonCSS3-etape2.jpg

Attaquons-nous maintenant au dégradé de couleurs pour le fond de notre bouton. Le dégradé va permettre de donner un plus de volume à notre bouton. La propriété linear-gradient n'étant pas complétement gérer par tous les navigateurs actuels, il faut déclarer un préfixe spécifique à certains navigateurs.

  1. a.bouton {  
  2.     ...  
  3.     background: -moz-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  4.     background: -webkit-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  5.     background: -o-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  6.     background: -ms-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  7.     background: linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  8. }  

Voici le résultat de notre dégradé:

boutonCSS3-etape3.jpg

Il existe de nombreux générateurs CSS en ligne, celui-ci vous sera utile pour générer vos dégradés de couleurs http://www.colorzilla.com/gradient-editor

Pour que le texte de notre bouton soit un peu plus mis en avant, nous allons ajouter un léger effet d'ombrage grâce à la propriété text-shadow. Dans notre exemple, nous utiliserons un pixel de couleur blanche sur le bas du texte. Cela permettra au texte d'avoir un peu plus de profondeur.

  1. a.bouton {  
  2.     ...  
  3.     text-shadow0 1px 0 #fff;  
  4. }  

Résultat obtenu:

boutonCSS3-etape4.jpg

Ensuite il nous reste plus qu’à ajouter une ombre derrière notre bouton avec la propriété box-shadow. Cette propriété n'est pas obligatoire, mais cela ajoute encore un peu plus de volume et de contraste à votre bouton.

  1. a.bouton {  
  2.     ...  
  3.     box-shadow: 0 0 5px rgba(0,0,0,0.2);  
  4. }  

Résultat obtenu:

boutonCSS3-etape5.jpg

Étape 4

Cette dernière étape consiste à personnaliser les différents états de votre bouton. La pseudo classe :hover servira pour le survol de la souris sur le bouton, tandis que la pseudo classe :active sera utilisée lorsque vous cliquez sur votre bouton.

  1. a.bouton:hover {  
  2.     background: -moz-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  3.     background: -webkit-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  4.     background: -o-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  5.     background: -ms-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  6.     background: linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  7. }  
  1. a.bouton:active {  
  2.     box-shadow: 0 0 5px rgba(0,0,0,0.2inset;  
  3. }  

Code CSS complet

  1. a.bouton {  
  2.     color#666;  
  3.     fontbold 20px Arialsans-serif;  
  4.     displayblock;  
  5.     width200px;  
  6.     height40px;  
  7.     line-height40px;  
  8.     text-aligncenter;  
  9.     text-decorationnone;  
  10.     border1px solid #aaa;  
  11.     background#f8f8f8;  
  12.     border-radius: 6px;  
  13.     background: -moz-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  14.     background: -webkit-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  15.     background: -o-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  16.     background: -ms-linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  17.     background: linear-gradient(top#f8f8f8 40%, #cacaca 100%);  
  18.     text-shadow0 1px 0 #fff;  
  19.     box-shadow: 0 0 5px rgba(0,0,0,0.2);  
  20. }  
  21. a.bouton:hover {  
  22.     background: -moz-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  23.     background: -webkit-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  24.     background: -o-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  25.     background: -ms-linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  26.     background: linear-gradient(top#cacaca 20%#f8f8f8 100%);  
  27. }  
  28. a.bouton:active {  
  29.     box-shadow: 0 0 5px rgba(0,0,0,0.2inset;  
  30. }  
Azork

Auteur: Azork

Restez au courant de l'actualité et abonnez-vous au Flux RSS de cette catégorie

Commentaires (0)

Les commentaires sont fermés


aucune annexe