Les boutons graphiques en CSS

:salut:

Aujourd'hui, Pascale Lambert nous propose une astuce sous forme de mini tutoriel qui nous montre comment créer un bouton design à l'aide d'image et de CSS. Le bouton en image qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons graphiques étaient animés par un JavaScript ou pire (car plus lourd) par un applet java. Avec les CSS, par effet "rollover", la légèreté et la simplicité est de mise pour créer de beaux boutons.

N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

Voir aussi les cours et tutoriels pour apprendre CSS.

Merci à elle :)

C'est sympa quand on veut donner à un lien l'aspect d'un bouton, mais il faut éviter de faire l'inverse, c'est-à-dire remplacer un bouton de formulaire par un lien stylisé.

Exact mais il n'empêche que la technique pour un bouton de formulaire est quasiment identique ;)

C'est sympa, mais pourquoi ne pas profiter de l'occasion pour parler des sprites CSS rapidement ? Ca éviterait ce clignotement au premier survol...

Encore une fois, très bonne série de tutos sinon :ccool:

Hey :-),

J'ai réalisé ce test il y a un bon moment. Une façon autrement sympa et plus actuelle de styliser des boutons CSS (ou d'en faire avec des liens) : http://development.android-bay.net/D...SX_button.html.

Pour parler de Sprites CSS, il y a déjà un exemple ici : http://christophe-f.developpez.com/t...oins-arrondis/

Bel article:ccool:

Citation:

---

Envoyé par Bisûnûrs

...mais il faut éviter de faire l'inverse, c'est-à-dire remplacer un bouton de formulaire par un lien stylisé.

---

Pourquoi donc ?

Tout d'abord parce que ce n'est pas prévu pour ça et que deuxièmement tu dois utiliser du JavaScript pour soumettre le formulaire et du coup au niveau accessibilité ce n'est pas l'idéal d'autant plus que tu as le risques que le JavaScript soit désactivé.

Maintenant si tu vois autre chose Bisûnûrs ... ;)

Pour évité le sintillement lors du premier hover j'utilise un image avec tout les aspect possible un par dessus lautre Ex: http://www.listingimmo.com/images/Trouver.jpg

Et ensuite dans le css je change le background-position tout simplement lors du hover.
Donc puisque l'image est charger au début, aucun sintillement!

input type submit stylisé avec du css :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

input[type=submit] { border:0; padding:0; margin:0; color:#444; font-weight:bold; width:156px; height:31px; padding-bottom:3px; background:url(bouton.gif) no-repeat; background-position:top left; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:13px; cursor:pointer; } input[type=submit]:hover { background-position:bottom left; }

---

Code:

---

<input type="submit" value="Envoyer" />

---

Quelques améliorations pour être cross-browser sont surement à apporter, le :hover sur le input n'est pas franchement valide mais avec un peu de javascript à la place ça passe ;)

Citation:

---

Envoyé par Webselect

Pour évité le sintillement lors du premier hover j'utilise un image avec tout les aspect possible un par dessus lautre Ex: http://www.listingimmo.com/images/Trouver.jpg

Et ensuite dans le css je change le background-position tout simplement lors du hover.
Donc puisque l'image est charger au début, aucun sintillement!

---

C'est ce qu'on appelle Sprite CSS ;)

Citation:

---

Envoyé par Kerod

Maintenant si tu vois autre chose Bisûnûrs ... ;)

---

Juste insister sur le "pas prévu pour ça" : Chaque élément sa propre utilité, c'est ce qui s'appelle aussi sémantique et ce n'est pas à négliger !