Google のボタンをCSSだけでつくる

Googleのトップページの検索ボックスの横にある「Search」ボタンは2009年頃から 画像は使わずに CSS のみで作成されています。そこで、今日は簡単に CSSだけでつくるGoogle風のボタンを紹介します。CSSでつくる理由？それはスマートフォンです、画像でつくっていたりしたらページのダウンロードに時間がかかってしまいます。

HTMLソース と CSSソースは下記になります。<button>要素と<input />要素のバージョンを別々に用意しました。

【HTMLソース】
画像左

<button>お申し込み</button>

画像右

<input type="submit" value="お申し込み" />

【CSSソース】

button.g-button, a.g-button, input[type=submit].g-button {
display : inline-block;
padding : 8px 12px;
-webkit-border-radius : 2px 2px;
border : solid 1px rgb(153, 153, 153);
background : -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
background : -moz-linear-gradient(top,rgb(255, 255, 255),rgb(221, 221, 221));
background : linear-gradient(top,rgb(255, 255, 255),rgb(221, 221, 221));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff', EndColorStr='#DDDDDD'); 
cursor : pointer;
font-size : 16px;
color : #333;
text-decoration : none;
text-align : center;
text-shadow : 0px 1px 1px rgba(255,255,255,1);
line-height : 1; }

CSSだけで簡単に綺麗なボタンをつくることができる。当然ながら、別の色を指定することによって様々なデザインを作成出来る。今回は、IEに対応したfilterも記述した。

サンプルファイル