Backup of blog/2010-05-16 (2) Back

---

Back to History list

#navi(../)
*ボタンを画像なしでカスタマイズせよ！ [#r87943a0]
さて、もうお気づきかと思うが、最近Googleのボタンのデザインが変わった。ソースを見ても画像が使われていない。これも、CSSだけでやっているらしい。というわけで、前回の[[角丸半透明ボックスにドロップシャドウ>../2010-05-14]]に続いてボタンをカスタマイズしてみようと思う。

まず、ボタンに関するタグだが、ここでは「擬似クラス」というものを使って、指定されたタグでなおかつ指定された属性のみを選択するようにする。ボタンに関係するタグは、buttonタグと、inputタグのtype属性がsubmitとresetのものである。したがってCSSで選択する場合以下のようになる。まぁ、厳密には、imageも含まれるだろうが、今日日のサイトで使っているのを見たことが無いので除外。
-input[type='submit']
-input[type='reset']
-button

とりあえず、白黒のボタンを作ろう。ただ、普通に作るとボタン同士がくっついてしまうので、margin:2px;を追加。
#code(css){{
input[type='submit'], input[type='reset'], input[type='button'], button {
	text-decoration: none;
	border:1px solid grey;
	color:black;
	background-color: gainsboro;
	margin:2px;
}
}}

では、グラデーションを加える。Operaではグラデーションが使えないので例によって