Bouton en CSS sans JavaScript

Créer une interface avec des boutons en relief est possible avec uniquement du code CSS, et sans une ligne de JavaScript on peut avoir l'effet visuel du bouton pressé par la souris.

Ce tutoriel montre comment en partant de la création de l'image en relief avec The GIMP.

Créer le bouton avec GIMP

1. Créer une nouvelle image de 180 x 28 pixels, et dans les options avancées, avec un fond transparent.
2. Cliquer sur l'outil de sélection rectangulaire dans la boite à outil (la première icône).
3. Définir les bords comme arrondis avec un rayon de 6.
4. Faire une sélection qui correspond à la taille de l'image.
   
5. Choisir une couleur de tracé.
6. Cliquer sur l'outil de dégradé. Faire un dégradé du bas vers le haut avec une très légere inclinaison à gauche.
7. Faire une nouvelle sélection de sorte qu'elle ait une marge de 2 pixels, en conservant les coins arrondi mais avec un rayon de 4.5 maintenant.
8. Revenir à l'outil de dégradé. Faire un dégradé du bas vers le haut, mais en partant plus bas que l'image et en allant plus haut.
   Le résultat sera une couleur en bas un peu plus claire que le bord, et plus foncée en haut.
   
   
9. On obtient le résultat ci-dessous.
   

L'utilisation peut-être très simple avec même un minimum d'effets visuels.

Bouton simple

L'image du bouton est utilisée comme fond d'image d'un balise de lien.

Exemple de texte

Le code HTML est minimal:

<a class="button" href="">Exemple de texte</a> 

Le design tient entièrement au code CSS:

.button
{
    display:block;
    width:180px;
    height:24px;
    background-image:url(button.gif);
    background-repeat: no-repeat;
    text-align:center;
    padding:4px;
}

L'effet visuel serait meilleur si le bouton semblait être pressé, avec la souris.

Bouton que l'on presse

Le code CSS est légèrement modifié, on ajoute deux lignes:

position:absolute;
margin-top:-2px;

La position est absolue dans le conteneur, sinon le décalage du bouton entraînerait aussi le décalage de la partie de la page qui le suit... Cela oblige alors a donner au conteneur une taille définie.

.buttonlist
{
    height:32px;
}

Et on ajoute une règle pour faire "bouger" le bouton lorsque la souris passe dessus:

a.button1:hover 
{
    color:#333;
    margin-left:2px;
    margin-top:0px; 
}

Une application pratique, la barre de boutons.

Barre de boutons en CSS sans JavaScript

Le mode display:block est indispensable pour afficher les boutons. Cela rend obligatoire l'attribut position:absolute.
Pour cela, on doit donner la position des boutons dans la barre.

CSS:

<div class="bar">
<a class="button1" href="">Bouton 1</a>
<a class="button1" style="left:192px" href="">Bouton 2</a>
<a class="button1" style="left:376px" href="">Bouton 3</a>
</div>

JavaScript:

.button1
{
  display:block;
  width:180px;
  height:28px;
  background-image:url(button.png);
  background-repeat: no-repeat;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  padding:5px;	
  margin:0;
  position:absolute;
  left:8px;
  margin-top:-2px;
  margin-left:8px;
}
a.button1:visited
{
  color:black;
}
a.button1:hover
{
  color:#333;
  margin-left:10px;
  margin-top:0px;	
}

.bar
{
  position:relative;
  background-image:url(images/wood.jpg);
  padding:8px 0 2px 32px;
  width:600px;
  height:30px;
}

Obtenir l'image du bouton.