Chapitre 20. Bouton CSS sans programmation
Précédent Partie IV. CSS, plus loin Suivant

Chapitre 20. Bouton CSS sans programmation

Table des matières

Bouton plat
Source html
Source css
Bouton en relief
Source html
Source css
Plus d'informations

Remarque

Ce texte est fortement inspiré de http://mammouthland.free.fr/cours/css/cours3.php.

Bouton plat

L'exemple ci-après permet de faire un bouton dont le fond change d'aspect au passage de la souris. Cet effet, largement répandu, utilise souvent un javascript ou un applet java lourd à charger.

Ici, la légèreté est de mise... Et on obtient ainsi facilement :

par défaut :

Bouton sans programmation

quand le pointeur de la souris s'y pose :

Bouton sans programmation, en survol

Source html

          <a href=".." class="bouton">Cliquez ici !</a>

Source css

          a.bouton:link, a.bouton:visited, a.bouton:hover{
            width:150px; 
            height:30px; 
            text-decoration:none; 
            color:white;
            text-align:center; 
            font-weight:bold; 
            padding:5px
          }          
          a.bouton:link, a.bouton:visited{
            background-color:#000080;
          }
          a.bouton:hover{
            background-color:#0000ff;
          }
Précédent Niveau supérieur Suivant
En apprendre plus Sommaire Bouton en relief