blog/2010-05-16

Total: 1571 / Today: 1 / Yesterday: 1

ボタンを画像なしでカスタマイズせよ！

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

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

inputtype='submit'?
inputtype='reset'?
inputtype='button'?
button

とりあえず、灰色のボタンを作ろう。ただ、普通に作るとボタン同士がくっついてしまうので、margin:2px;を追加。

input[type='submit'], input[type='reset'], input[type='button'], button {
	text-decoration: none;
	border:1px solid grey;
	color:black;
	background-color: gainsboro;
	margin:2px;

button1.png

では、グラデーションを加える。Operaではグラデーションが使えないので例によってGradient CSS Generetorを使う。高さは32ぐらいでいいだろう。

input[type='submit'], input[type='reset'], input[type='button'],button {
	text-decoration: none;
	border:1px solid grey;
	color:black;
	background-color: gainsboro;
	margin:2px;
	/* other */
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
	background-repeat:repeat-x;
	/* MSIE */
	filter:
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro);
	/* FireFox */
	background: -moz-linear-gradient(top,  white, gainsboro);
	/* Safari / Chrome */
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));

button2.png

どうだろうか。これだけで立体感が出る。

こんどは、box-shadowで影をつけてみよう。なお、IEはこれと同等の処理がないためShadowフィルタで代用する。

input[type='submit'], input[type='reset'], input[type='button'],button {
	text-decoration: none;
	border:1px solid grey;
	color:black;
	background-color: gainsboro;
	margin:2px;
	/* other */
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
	background-repeat:repeat-x;
	/* CSS3 */
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	/* MSIE */
	filter:
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
		progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
	/* FireFox */
	background: -moz-linear-gradient(top,  white, gainsboro);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	/* Safari / Chrome */
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

button3.png

ちなみに、IEはこうなる。まぁ仕方が無いね。button3ie.png

ボタンはやっぱり角丸じゃないと・・・

border-radiusを使って角丸ボタンにする。なお、ここからさきは、IEでは効果がでない。

input[type='submit'], input[type='reset'], input[type='button'],button {
	text-decoration: none;
	border:1px solid grey;
	color:black;
	background-color: gainsboro;
	margin:2px;
	/* other */
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
	background-repeat:repeat-x;
	/* CSS3 */
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	border-radius: .5em;
	/* MSIE */
	filter:
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
		progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
	/* FireFox */
	background: -moz-linear-gradient(top,  white, gainsboro);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-border-radius: .5em;
	/* Safari / Chrome */
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-border-radius: .5em;

button4.png

うーん、クールだね。

最近話題のtext-shadowを使う

最近text-shadowを使っているサイトが増えてきた。結構昔からある要素だが、IEのシェア低下と、CSS3の広がりから話題になり始めている。これは、ブラウザ依存の要素ではないため、単純にtext-shadowを入れるだけで反映される。

input[type='submit'], input[type='reset'], input[type='button'],button {
	text-decoration: none;
	border:1px solid grey;
	color:black;
	background-color: gainsboro;
	margin:2px;
	/* other */
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmbzfZ+87yvP88h933Jdl5znKcdxyL7vsm2brOsqy7LIPM8yTZOM4yjDMEjf9/L7/aTrOmnbVpqmkbqupaoqKctSiqKQPM8lyzJJ01SSJJE4jiWKIgnDUIIg8A9qu3jB7icwNQAAAABJRU5ErkJggg==");
	background-repeat:repeat-x;
	/* CSS3 */
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	border-radius: .5em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	/* MSIE */
	filter:
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
		progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
	/* FireFox */
	background: -moz-linear-gradient(top,  white, gainsboro);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-border-radius: .5em;
	/* Safari / Chrome */
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-border-radius: .5em;

button5.png

どうだろう。立体感が出てきただろう。

ハイライトを変更しよう

さて、このままだとボタンをクリックした時やマウスが乗っかった時の質感がでない。そこで、その時のスタイルも変更しよう。今度は「擬似クラス」を用いて指定する。擬似クラスリンクの色を変更するときによく使う:link、:visited、:hover;、:activeである。この他にもいろいろあるが、今回使用するのは、マウスが乗っかった時の、:hoverと、クリックした時の、:activeである。

まずは、マウスが乗っかった時の:hoverから。

input[type='submit']:hover, input[type='reset']:hover, input[type='button']:hover, button:hover {
	text-decoration: none;
	background-color: grey;
	filter:
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=lightgrey,EndColorStr=silver)
		progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#333333');
	background: -moz-linear-gradient(top,  lightgrey, silver);
	background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(silver));
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAkUlEQVQImQXBiw6BAAAF0PszSaSkpF8hhDxCiB9gGIZhHsMwDOMvr3Ng9X6E1f0SqeBDmMGbMDsvItl+EkbrQRj+ndD9G6E3r0SicSG0+pnQvBMR946EWjsQanVPKJUdoZS3RMzdELK7JuTSiogWl0SksCAizpyQnBkh5adEODchxOyYEO0REbKHhJAZEEK6zz/rh0TRW/woagAAAABJRU5ErkJggg==");
	background-repeat:repeat-x;

button6.png

次に、クリック時の:activeだ。ここでは、マウスをクリックしたときにボタンが押し込まれるようにアニメーションさせるため、position: relative; top: 1px;を追加する。色は、通常時のグラデーションを反転させるでいいだろう。また、押し込んでいる状態なので、ドロップシャドウは解除する。

input[type='submit']:active, input[type='reset']:active, input[type='button']:active, button:active {
	position: relative;
	top: 1px;
	/* other */
	background-color: white;
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAc0lEQVQImQXBhQ3DAADAsPx/Y0llmMqkUmYTBIGEYShRFEkcx5IkiaRpKlmWSZ7nUhSFlGUpVVVJXdfSNI20bStd18nv95O+72UYBhnHUaZpknmeZVkWWddVtm2Tfd/lOA45z1Ou65L7vuV5HnnfV77v8w8MKnjBigVjXQAAAABJRU5ErkJggg==");
	background-repeat:repeat-x;
	/* css3 */
	box-shadow: 0 0 0 rgba(0,0,0,0);
	/* MSIE */
	filter:
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=gainsboro,EndColorStr=white)
		progid:DXImageTransform.Microsoft.Shadow(Strength=0);
	/* FireFox */
	background: -moz-linear-gradient(top,  gainsboro, white);
	-moz-box-shadow: 0 0 0 rgba(0,0,0,0);
	/* Safari / Chrome */
	-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
	background: -webkit-gradient(linear, left top, left bottom, from(gainsboro), to(white));

button7.png

これで完成だ。IEの場合、:activeの反応が鈍いなどと問題があるが、概ね立体感のあるボタンが作れたと思う。

サンプル

button test.html

Last Modified: 2010-05-16 15:53:00