• CSS (7)
  
• Flash & AS (2)
  
• HTML (19)
  
• Java (5)
  
• JavaScript (52)
  
• Perl (0)
  
• PHP (36)
  
• Protocols (1)
  
• Python (0)
  
• Ruby (0)
  
• SQL (4)
  
• Linux (13)
  
• Misc (9)
  

Améliorer le design des boutons HTML avec un peu de CSS

Pour changer le design par défaut des boutons HTML de type <input type="button">, en mettant une image d'arrière-plan adaptée à la charte graphique d'un site Internet, voici comment faire :

- lorsque vous voulez afficher un bouton classique, vous avez l'habitude d'écrire :

<input type="button" value="Envoyer" name="envoyer" />

- pour améliorer le design, écrivez plutôt quelque chose comme :

<input type="button" value="" name="envoyer" class="bouton" />

L'attribut "value" doit être laissé vide. Vous devez ajouter un attribut "class" pour compléter par la suite votre feuille de style comme suit :

.bouton{ 
        width: 80px; /* largeur de votre image de fond */
        height: 30px; /* hauteur de votre image de fond */
        background-image: url("bouton.png"); /* l'image de fond du bouton */
        background-repeat: no-repeat; /* pour éviter que l'arrière-plan se répète */
        cursor: pointer; /* au rollover, le curseur est une main, indiquant que le bouton est cliquable */ 
}

Télécharger un exemple sur : http://aurelie-dufour.fr/bouton_CSS.zip