41Mag - 18 Exemples de bouton en CSS 3 inspiré par Google

18 Exemples de bouton en CSS 3 inspiré par Google

Autrefois, quand un webDesigner avait besoin d’un joli bouton, fonctionnel et évolutif, il avait besoin de Photoshop, d’un peu de CSS et bien souvent de JavaScript. Avec le CSS3 tout a changé, tout est plus facile et c’est mieux ainsi !

Voici quelques exemples de boutons en CSS 3 inspiré par Google.

Chaque bouton ci-dessous possède les styles suivant :

1
2
3
4
5
button {
	width:110px;
	cursor:pointer;
	text-transform:capitalize;
}

Aucun bouton ne sera modifier au passage de la souris. Cet acte est volontaire car c’est à vous d’adapter ces boutons à vos projets. Vous pourrez par exemple, au passage de la souris, changer la couleur de fond (en y ajoutant la couleur dominante de votre site, change la couleur de police … Un conseil, restez dans le sobre et discret.

18 Exemples de boutons en CSS 3 inspiré par Google

  • Classique style :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.bouton1 {
	padding:6px 0 6px 0;
	font:Bold 13px Arial;
	background:#d34836;
	color:#fff;
	width:90px;
	border-radius:2px;
	border:none;
}
.bouton2 {
	padding:6px 0 6px 0;
	font:bold 13px Arial;
	background:#478bf9;
	color:#fff;
	border-radius:2px;
	width:100px;
	border:none;
}
.bouton3 {
	padding:6px 0 6px 0;
	font:bold 13px Arial;
	background:#f5f5f5;
	color:#555;
	border-radius:2px;
	width:100px;
	border:1px solid #ccc;
}
.bouton4 {
	padding:6px 0 6px 0;
	font:bold 13px Arial;
	background:#f5f5f5;
	color:#555;
	border-radius:2px;
	width:100px;
	border:1px solid #ccc;
	box-shadow:1px 1px 3px #999;
}
  • Rond / carre :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.bouton5 {
	border-radius:12px 0 12px 0;
	background: #d34836;
	border:none;
	color:#fff;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
}
.bouton6 {
	border-radius:12px 0 12px 0;
	background: #478bf9;
	border:none;
	color:#fff;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
}
.bouton7 {
	border-radius:12px 0 12px 0;
	background: #f5f5f5;
	border:none;
	color:#555;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
	border:1px solid #ccc;
}
.bouton8 {
	border-radius:12px 0 12px 0;
	background: #f5f5f5;
	border:none;
	color:#555;
	font:bold 12px Verdana;
	padding:6px 0 6px 0;
	box-shadow:1px 1px 3px #999;
}
  • Style ombrage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.bouton9 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:2px;
	box-shadow:1px 1px 3px #aaa;
	background:#fff;
	font:bold 13px Arial;
	color:#555;
}
.bouton10 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:2px;
	box-shadow:2px 2px 5px #aaa;
	background:#fff;
	font:bold 13px Arial;
	color:#555;
}
.bouton11 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:2px;
	box-shadow:2px 2px 6px #999;
	background:#fff;
	font:bold 13px Arial;
	color:#555;
}
.bouton12 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:2px;
	box-shadow:3px 3px 12px #999;
	background:#fff;
	font:bold 13px Arial;
	color:#555;
}
  • Bouton ovale
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.bouton13 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:8px;
	background:#d34836;
	font:bold 13px Arial;
	color:#fff;
}
.bouton14 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:50%;
	background:#478bf9;
	font:bold 13px Arial;
	color:#fff;
	width:160px;
}
.bouton15 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:75%;
	border-bottom:3px solid #4753f3;
	font:bold 13px Arial;
	color:#555;
	background:#fff;
}
.bouton16 {
	border:none;
	padding:6px 0 6px 0;
	border-radius:75%;
	border-bottom:7px solid #4753f3;
	font:bold 13px Arial;
	color:#555;
	background:#fff;
	box-shadow:2px 2px 3px #999;
	border-top:2px solid #59cd27;
}
  • Bouton rond
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.bouton17 {
	width:85px;
	height:85px;
	background:#fafafa;
	box-shadow:2px 2px 8px #aaa;
	font:bold 13px Arial;
	border-radius:50%;
	color:#555;
}
.bouton18 {
	width:85px;
	height:85px;
	background:#cc0000;
	font:bold 13px Arial;
	border-radius:50%;
	border:none;
	color:#fff;
}

Article du même thême : .

  • phi.

    tutu incomplet, un exemple avec icone incorporé aurait été apprécié

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.