DevKB
Web Development Knowledge Base
HOME | TOP 20 | WRITE AN ARTICLE |
Sections :



RSS RSS Feed

You too, please publish your useful code snippets in any programming language :
write an article !


Valid HTML 4.0 Transitional

Plateforme d'envoi de gros fichiers en ligne
Dépannage site web
Blog infogérance
Hébergement e-mail

Aurélie Dufour - - 20/03/2008 - vue 5049 fois

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




Write a comment :
Your name :     E-mail (optional) :

AntiSpam : what animal is visible on this picture ? :

Nos partenaires : iPhone 8 Cases & Protection