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

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

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 :

• bouton 01
• bouton 02
• bouton 03
• bouton 04

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

• bouton 05
• bouton 06
• bouton 07
• bouton 08

.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;
}
Bouton ovale

• bouton 13
• bouton 14
• bouton 15
• bouton 16

.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

• bouton 17
• bouton 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;
}