Les boutons graphiques en CSS

**Bovino** · 21/07/2010, 00h55

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** · 21/07/2010, 08h48

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** · 21/07/2010, 10h40

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

**Halleck** · 21/07/2010, 10h41

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** · 21/07/2010, 10h44

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** · 21/07/2010, 10h44

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

**Thes32** · 21/07/2010, 10h55

Bel article

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 ?

**Kerod** · 21/07/2010, 11h04

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** · 21/07/2010, 18h28

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** · 21/07/2010, 21h03

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