[CSS] くぼみにはまったボタンをCSS3で生成する：グラデーション、ドロップシャドウの活用

2013 年 4 月 19 日

【2013年4月22日 加筆・修正】　box-shadowのアルファについて

こちらのサイトで、くぼみにはめられた感じの魅力的なボタンをPhotoshopでつくる場合のチュートリアルが掲載されている。

これをHTML5、CSS3を使って生成してみる。

なお、以下ではコードを簡略してわかりやすくするために、ベンダープレフィックスなどは省略している。クロスブラウザのコードは最後に載せてある。

基本となるHTML

<div class="bg">
	<div class="hollow">
		<div class="btn">SAMPLE</div>
	</div>
</div>

背景

まず、背景を上から下への白と灰色のグラデーションでつくる。

.bg {
     background-image: linear-gradient(top , #F0F0F0, #C2C2C2);
     padding: 100px;
}

くぼみ

  • 形は角丸にし、半径は大きめに設定しておく（全体のサイズが可変のため）
  • シャドウを外側に白で下方向にぼかして少しつけ、内側に黒で同じようにする
  • パディングであとでつけるボタン部分との間にスペースをつくる
.hollow {
     display: inline-block;
     background-image: linear-gradient(top , #C2C2C2, #F0F0F0);
     border-radius: 100px 100px 100px 100px;
     box-shadow: 0px 3px 1px #EEEEEE, 0px 3px 1px #B7B7B7 inset;
     padding: 20px;
}

ボタン

  • 好きな色で、上が明るく、下が暗くなるようにグラデーションをかける
  • 形は角丸にし、半径は大きめに設定しておく（全体のサイズが可変のため）
  • シャドウを外側に黒で下方向に大きくぼかしてつけ、内側に白で下方向に少しだけつる
  • パディングであとでつける文字部分との間にスペースをつくる（左右を広めに）
  • 文字は好みの形に（サンプルではもっとも太くなるようにしている）
.btn {
     display: inline-block;
     background-image: linear-gradient(top , #FF8F5E, #D44E1A);
     border-radius: 50px 50px 50px 50px;
     box-shadow: 0px 5px 10px #000000, 0px 1px 3px #FFB697 inset;
     color: white;
     font-size: 35px;
     font-weight: 900;
     padding: 10px 60px;
}
SAMPLE

完成

SAMPLE
.bg {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c2c2c2');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#c2c2c2')";
	background-image: -moz-linear-gradient(top, #f0f0f0, #c2c2c2);
	background-image: -ms-linear-gradient(top, #f0f0f0, #c2c2c2);
	background-image: -o-linear-gradient(top, #f0f0f0, #c2c2c2);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#c2c2c2));
	background-image: -webkit-linear-gradient(top, #f0f0f0, #c2c2c2);
	background-image: linear-gradient(top, #f0f0f0, #c2c2c2);
	
	padding: 100px;
}

.hollow {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#c2c2c2', endColorstr = '#f0f0f0');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#c2c2c2', endColorstr = '#f0f0f0')";
	background-image: -moz-linear-gradient(top, #c2c2c2, #f0f0f0);
	background-image: -ms-linear-gradient(top, #c2c2c2, #f0f0f0);
	background-image: -o-linear-gradient(top, #c2c2c2, #f0f0f0);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#c2c2c2), to(#f0f0f0));
	background-image: -webkit-linear-gradient(top, #c2c2c2, #f0f0f0);
	background-image: linear-gradient(top, #c2c2c2, #f0f0f0);
	background-image: -moz-linear-gradient(center top , #C2C2C2, #F0F0F0);
	
	display: inline-block;
	border-radius: 100px 100px 100px 100px;
	box-shadow: 0px 3px 1px #EEEEEE, 0px 3px 1px #B7B7B7 inset;
	padding: 20px;
}

.btn {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff8f5e', endColorstr = '#d44e1a');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff8f5e', endColorstr = '#d44e1a')";
	background-image: -moz-linear-gradient(top, #ff8f5e, #d44e1a);
	background-image: -ms-linear-gradient(top, #ff8f5e, #d44e1a);
	background-image: -o-linear-gradient(top, #ff8f5e, #d44e1a);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ff8f5e), to(#d44e1a));
	background-image: -webkit-linear-gradient(top, #ff8f5e, #d44e1a);
	background-image: linear-gradient(top, #ff8f5e, #d44e1a);
	
	color: white;
	display: inline-block;
	font-size: 35px;
	font-weight: 900;
	padding: 10px 60px;
	border-radius: 50px 50px 50px 50px;
	box-shadow: 0px 5px 10px #000000, 0px 1px 3px #FFB697 inset;
}

まとめ

ボタンサイズを固定にする場合

上記では、テキストのフォントサイズに合わせてボタンのサイズが変わるようになっているが、固定サイズで表示したい場合、逆にフォントのサイズを自分で調整し、センタリングして垂直方向にも中央寄せしなければならない。

display: tableとtable-cellを使う。

以下の部分を追記する。

.hollow {
  display: table;
  table-layout: fixed;
  height: 100px;
  width: 350px;
}

.btn {
  display: table-cell;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

シャドウの不透明度

上記の例では不透明度を使わず、単純に色を変えている。

リンク先のPhotoshopの例ではシャドウの不透明度を下げて調整しているので、それと同じようにやるには色指定にrgba()を使う。

	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);

背景

背景にグラデーションで色を付けているのは、実はこうしないとくぼんでいるように見えづらいため。

こうしたくぼみを表現するには背景についてもセットで考えなければならないので、使える場所はやや限定されるかもしれない。

CSS,HTML

Posted by takasho