HTML5, CSS3, JQuery SAMPLES

The Sample Source code of the HTML5, CSS3, JQuery and more!

̃Gg[͂ĂȃubN}[Nɒlj

#05 CSS3 カラフルなグラデーションボタン

#05 CSS3 カラフルなグラデーションボタン
RED TEAM DESIGN で紹介されていたテクニックです。

a タグを使用したアイコン付のボタンです。a タグにクラス属性を指定することによってボタン表示します。また、a タグで囲んだ文字列がボタンのラベルとなりますが、a タグで囲む文字列は、span タグで囲う必要があります。

<a href="" class="button button-blue"><span>ボタンラベル</span></a>

このボタンは全て画像を使わずに CSS3 のみで表示します。

Demo を見る

ソースコード(CSS)共通

ボタンの色に関わらず、以下のスタイルシートを適用して、a タグに button クラスを指定します。

.button { margin: 10px; text-decoration: none; font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/ display: inline-block; text-align: center; color: #fff; border: 1px solid #9c9c9c; /* Fallback style */ border: 1px solid rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0,0,0,0.4); box-shadow: 0 0 .05em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4); } .button, .button span { -moz-border-radius: .3em; border-radius: .3em; } .button span { border-top: 1px solid #fff; /* Fallback style */ border-top: 1px solid rgba(255, 255, 255, 0.5); display: block; padding: 0.5em 2.5em; /* The background pattern */ background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))); background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%); /* Pattern settings */ -moz-background-size: 3px 3px; -webkit-background-size: 3px 3px; background-size: 3px 3px; } .button:hover { box-shadow: 0 0 .1em rgba(0,0,0,0.4); -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4); .button:active /* When pressed, move it down 1px */ position: relative; top: 1px; }

ソースコード(CSS)必要に応じて使用する

ボタンの色によって、以下のスタイルシートを使います。a タグには上記の button クラスと以下の色別のクラスの2つを指定します。

カーキ色ボタンの場合 button-khaki クラスを追加

.button-khaki { background: #A2B598; background: -webkit-gradient(linear, left top, left bottom, from(#BDD1B4), to(#A2B598) ); background:-moz-linear-gradient(-90deg, #BDD1B4, #A2B598); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BDD1B4', EndColorStr='#A2B598'); } .button-khaki:hover { background: #BDD1B4; background: -webkit-gradient(linear, left top, left bottom, from(#A2B598), to(#BDD1B4) ); background: -moz-linear-gradient(-90deg, #A2B598, #BDD1B4); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A2B598', EndColorStr='#BDD1B4'); } .button-khaki:active { background: #A2B598; }

ブルー色ボタンの場合 button-blue クラスを追加

.button-blue { background: #4477a1; background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) ); background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); } .button-blue:hover { background: #81a8cb; background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) ); background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb'); } .button-blue:active { background: #4477a1; }

ブラウン色ボタンの場合 button-brown クラスを追加

.button-brown { background: #8f3714; background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) ); background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714'); } .button-brown:hover { background: #bf6f50; background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) ); background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50'); } .button-brown:active { background: #8f3714; }

グリーン色ボタンの場合 button-green クラスを追加

.button-green { background: #428739; background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) ); background: -moz-linear-gradient(-90deg, #c8dd95, #428739); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739'); } .button-green:hover { background: #c8dd95; background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) ); background: -moz-linear-gradient(-90deg, #428739, #c8dd95); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95'); } .button-green:active { background: #428739; }

レッド色ボタンの場合 button-red クラスを追加

.button-red { background: #D82741; background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) ); background: -moz-linear-gradient(-90deg, #E84B6E, #D82741); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741'); } .button-red:hover { background: #E84B6E; background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) ); background: -moz-linear-gradient(-90deg, #D82741, #E84B6E); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E'); } .button-red:active { background: #D82741; }

パープル色ボタンの場合 button-purple クラスを追加

.button-purple { background: #6F50E7; background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) ); background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7'); } .button-purple:hover { background: #B8A9F3; background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) ); background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3'); } .button-purple:active { background: #6F50E7; }

ブラック色ボタンの場合 button-black クラスを追加

.button-black { background: #141414; background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414) ); background: -moz-linear-gradient(-90deg, #656565, #141414); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#656565', EndColorStr='#141414'); } .button-black:hover { background: #656565; background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565) ); background: -moz-linear-gradient(-90deg, #141414, #656565); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#141414', EndColorStr='#656565'); } .button-black:active { background: #141414; }

オレンジ色ボタンの場合 button-orange クラスを追加

.button-orange { background: #f09c15; background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) ); background: -moz-linear-gradient(-90deg, #f8c939, #f09c15); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15'); } .button-orange:hover { background: #f8c939; background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) ); background: -moz-linear-gradient(-90deg, #f09c15, #f8c939); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939'); } .button-orange:active { background: #f09c15; }

シルバー色ボタンの場合 button-silver クラスを追加

.button-silver { background: #c5c5c5; background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#c5c5c5) ); background: -moz-linear-gradient(-90deg, #eaeaea, #c5c5c5); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#c5c5c5'); } .button-silver:hover { background: #eaeaea; background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#eaeaea) ); background: -moz-linear-gradient(-90deg, #c5c5c5, #eaeaea); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c5c5c5', EndColorStr='#eaeaea'); } .button-silver:active { background: #c5c5c5; }

サンプルソース(HTML)

<a href="#" class="button button-khaki"><span>カーキ</span></a> <a href="#" class="button button-blue"><span>ブルー</span></a> <a href="#" class="button button-brown"><span>ブラウン</span></a> <a href="#" class="button button-red"><span>レッド</span></a> <a href="#" class="button button-purple"><span>パープル</span></a> <a href="#" class="button button-green"><span>グリーン</span></a> <a href="#" class="button button-black"><span>ブラック</span></a> <a href="#" class="button button-orange"><span>オレンジ</span></a> <a href="#" class="button button-silver"><span>シルバー</span></a>

Demo を見る

RED TEAM DESIGN で紹介されていたテクニックです。

Last updated on Mar 21th, 2021
このエントリーをはてなブックマークに追加

コメント