CSS3のtransitionを使ったナビメニュー(ボタン)


CSS3のtransition、box-shadow、text-shadow、border-radiusを使用してナビメニュー(ボタン)を作成してみました。 IE、Operaには対応していません。Firefox、Safari、Chromeでご覧ください

DEMO

 

HTML

<ul id="css3btn">
<li class="btn"><span class="yahoo"><a>Yahoo!</a></span></li>
<li class="btn"><span class="google"><a>Google</a></span></li>
<li class="btn"><span class="twitter"><a>Twitter</a></span></li>
<li class="btn"><span class="facebook"><a>Facebook</a></span></li>
</ul>

CSS

ul#css3btn {list-style:none;}
.btn a{
  /* ボタンのレイアウト */
  font: bold 1em "メイリオ", Meiryo, Verdana,Arial,"MS Pゴシック",sans-serif;
  float: left;
  margin-right:5px;
  padding: 4px 16px;
  color: #e7f3ef;

  /* テキストシャドウ */
  text-shadow: #000 1px 1px 1px;

  /* ボックスシャドウ */
  box-shadow: 0 3px 3px #b4d2d2, 0 3px 6px #ccc;
  -webkit-box-shadow: 0 3px 3px #b4d2d2, 0 3px 6px #ccc;
  -moz-box-shadow: 0 3px 3px #b4d2d2, 0 3px 6px #ccc;
 
  /* 角丸 */
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;

  /* アニメーション */
  transition: background-color 0.5s ease-in-out;
  -webkit-transition: background-color 0.5s ease-in-out;
  -moz-transition: background-color 0.5s ease-in-out;
}

.btn a:hover {text-decoration: none;cursor: pointer}

.yahoo a{background-color: #ff0033;}
.google a{background-color: #007b3d;}
.twitter a{background-color: #1f70ff;}
.facebook a{background-color: #283d79;}

.yahoo a:hover{background-color: #c35a6a;}
.google a:hover{background-color: #3eb94c;}
.twitter a:hover{background-color: #45a6ff;}
.facebook a:hover{background-color: #6c90bc;}

IEにcss3を対応させるにはこちらが参考になります・・クロスブラウザな CSS box-shadow

Internet Explorer9とcss3について

css3を使用しての装飾ではInternet Explorerがサポートされていない事から敬遠してましたが、IE9ではCSSのサポートがさらに強化され、CSS3の多くのコンポーネントがサポートされるようになりました。

  1. CSS3を使って角丸コーナーを表現する方法
  2. CSS3を使ってドロップ シャドウを付ける方法

 

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*