3. css：css3で作るシンプルなボタン（normal・hover・activeセット）

css：css3で作るシンプルなボタン（normal・hover・activeセット）

css：css3で作るシンプルなボタン（normal・hover・activeセット）
css3を使ったシンプルなボタンのサンプル。 基本的に、プログレッシブエンハンスメントな考え方なのですが、レガシーブラウザでも最低限の表現はしたいと思っています。 今回は、角丸（border-radius）とグラデーション（linear-gradientとDXImageTransform.Microsoft.gradient）を使用しています。

サンプル

ボタン

HTML

<p class="button1"><a href="#">ボタン</a></p>

CSS

.button1 {
	font-size: 12px;
	font-weight: bold;
}
.button1 a {
	color: #FFF;
	display: inline-block;
	padding: 0.5em 2em;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border: 1px solid #0059B2;
	border-bottom-color: #20559a;
	border-radius: 3px;
	background-color: #0071E1;
	background: -moz-linear-gradient(top, #2693FF, #0071E1);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#2693FF), to(#0071E1));
  filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#2693FF', EndColorStr='#0071E1');
}
.button1 a:hover {
	background: -moz-linear-gradient(top, #2082E3, #0166CB);
	background: -webkit-gradient(linear, left top, left bottom, from(#2082E3), to(#0166CB));
 filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2082E3', EndColorStr='#0166CB');
}
.button1 a:active {
	box-shadow: 0px 1px 0px rgba(255,255,255,0.6), inset 0px 1px 6px rgba(0,0,0,0.1);
	text-shadow:none;
	background: -moz-linear-gradient(top, #025AB1, #1C71C5);
	background: -webkit-gradient(linear, left top, left bottom, from(#025AB1), to(#1C71C5));
 filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#025AB1', EndColorStr='#1C71C5');
}

ダウンロード

デザインに使用できるpngをダウンロードできます。 制作したアプリはfirewoksCS6です。 [download id=”1″ format=”1″]

ライセンス

ご使用について
商用利用・個人利用（営利・非営利）ともに、フリーでご使用いただけます。
免責事項
データのダウンロード・ご使用によって生じた不利益・損害やいかなる問題について、一切責任を負いません。
禁止事項
二次配布（再配布）、素材の転売など。

参考サイト

Related Posts