HTML5, CSS3, JQuery SAMPLES

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

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

#02 CSS3 影付きボタン

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

li 要素(タグ)を使用したアイコン付のボタンです。HTML5 から導入された nav 要素内に ul, li 要素を記述することによってボタン表示します。クラス属性などを指定する必要はありません。

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

Demo を見る

ソースコード(CSS)

nav{ width: 960px; margin: 80px auto; text-align: center; } nav ul{ margin: 0; padding: 0; } nav li{ margin: 0 10px; /* Add some horizontal spacing */ display: inline-block; *display: inline; /* IE7 and below */ zoom: 1; } nav a{ display: inline-block; position: relative; padding: 8px 15px; border: 2px solid #fff; text-decoration: none; color: #999; font: bold 14px 'Lucida sans', Arial, Helvetica; background-color: #eaeaea; background-image: linear-gradient(top, #eaeaea, #fff); border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0 rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2); } nav a:hover{ background-color: #eee; background-image: linear-gradient(top, #eee, #fff); } nav a:active{ top: 1px; /* Simulate the push button effect */ background: #f5f5f5; box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .3); }

サンプルソース(HTML)

<nav> <ul> <li><a href="">ホーム</a></li> <li><a href="">カテゴリ</a></li> <li><a href="">このサイトについて</a></li> <li><a href="">その他</a></li> <li><a href="">お問い合わせ</a></li> </ul> </nav>

Demo を見る

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

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

コメント