Exemples de bouton en CSS 3 inspiré par Google

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 :

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

 .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

 .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

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