Discussion :

[Bovino]

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

[Bis�n�rs]

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�.

[Kerod]

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

[Halleck]

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

[Hywan]

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.

[Kerod]

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

[Thes32]

Bel article

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

Pourquoi donc ?

[Kerod]

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 ...

[Webselect]

Pour �vit� le sintillement lors du premier hover j'utilise un image avec tout les aspect possible un par dessus lautre Ex:

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!

[eckerdecker]

input type submit stylis� avec du css :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

<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

[Kerod]

Pour �vit� le sintillement lors du premier hover j'utilise un image avec tout les aspect possible un par dessus lautre Ex:

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

[Bis�n�rs]

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 !