HTML5, CSS3, JQuery SAMPLES

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

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

#01 CSS3 アイコン付きボタン

#01 CSS3 アイコン付きボタン
RED TEAM DESIGN で紹介されていたテクニックです。

a タグを使用したアイコン付のボタンです。a タグにクラス属性を指定することによってボタン表示します。このボタンは全て画像を使わずに CSS3 のみで表示します。

Demo を見る

ソースコード(CSS)共通

アイコンの有無や種類に関わらず、以下のスタイルシートを適用して、a タグに button クラスを指定します。

.button { display: inline-block; white-space: nowrap; background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: #fafafa; } .button:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; }

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

アイコンの種類によって、以下のスタイルシートを使います。a タグには上記の button クラスと以下のアイコン用のクラスの2つを指定します。アイコン用のクラスを付けない場合( button クラスのみ)には、アイコンなしのボタンになります。

追加アイコンの付ける場合 add クラスを追加

.add:before { content: "\271A"; }

編集アイコンの付ける場合 edit クラスを追加

.edit:before { content: "\270E"; }

削除アイコンの付ける場合 delete クラスを追加

.delete:before { content: "\2718"; }

保存アイコンの付ける場合 save クラスを追加

.save:before { content: "\2714"; }

メールアイコンの付ける場合 email クラスを追加

.email:before { content: "\2709"; }

次へアイコンの付ける場合 next クラスを追加

.next:before { content: "\279C"; }

注目アイコンの付ける場合 star クラスを追加

.star:before { content: "\2605"; }

再生アイコンの付ける場合 play クラスを追加

.play:before { content: "\25B6"; }

サンプルソース(HTML)

<a href="#" class="button">ボタン</a> <a href="#" class="button add">追加</a> <a href="#" class="button edit">編集</a> <a href="#" class="button delete">削除</a> <a href="#" class="button save">保存</a> <a href="#" class="button email">メール</a> <a href="#" class="button next">次へ</a> <a href="#" class="button star">注目</a> <a href="#" class="button play">再生</a>

Demo を見る

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

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

コメント