bl6.jp

CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSSだけで作れるって便利ですよね。IEはほとんど対応してないですけどそれはとりあえず置いときます。今回ボタンを作るにあたり意識したポイントは2点です。

[ads_center]

• ボタンに奥行き感を出す
• 文字をレタープレスっぽくする

ボタンに奥行き感を出すにはボックス上部を明るくしてボックス下部を暗くします。これにはbox-shadowのinsetを使いました。文字をレタープレスっぽくする場合はtext-shadowを使い、文字上部を暗くして文字下部を明るくします。以下ソースコードです。

#button {
	width: 170px;
	height: 50px;
	font-size: 18px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	color: #8a0047;
	background: #ef007c;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ef007c), color-stop(0.00, #ff5db1));
	background: -webkit-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -moz-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -o-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -ms-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	border-radius: 7px;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.9);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.6);
}