CSS3アニメーションで、ボタンを浮かせたり回したりする方法をご紹介します。
IE8以前の旧ブラウザなどでは動きませんが、javascript等が必要ないので、割と簡単に実装することが出来ます。サイトのちょっとしたアクセントにいかがでしょうか?
最近のスマートフォンブラウザはCSS3に対応しているものが多いので、今後ますます使う機会が増えていくと思いますよ。
※CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があります。
確認の際はChromeやFirefox、IEであれば10や11といったモダンブラウザでご覧ください。
ボタンサンプル
今回のアニメーションの基本「transition」というプロパティ。これに時間「〇s(秒)」や動かし方「ease、linear」等を指定して使用します。
浮上するボタン
カーソルをのせるとふわっと浮き上がったように影をつける方法です。
.btn_01 { width: 150px; height: 80px; line-height: 80px; display: block; background: #1abc9c; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .btn_01:hover { box-shadow: 0 0 5px #111; }
枠が出るボタン
カーソルをのせるとにゅるっと枠が出てくるボタンです。
「tranform」プロパティでサイズ変更し、「box-shadow」を重ねがけすることで枠線を作っています。
.btn_02 { width: 150px; height: 80px; line-height: 80px; display: block; background: #2ecc71; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .btn_02:hover { transform: scale(0.9); -webkit-transform: scale(0.9); box-shadow:0 0 0 7px #fff,0 0 0 8px #2ecc71; }
色が変わるボタン
カーソルをのせるとやんわりと色が変わるボタンです。配色次第でいろんな使い方が出来ますね。
実装はすごく簡単です。
.btn_03 { width: 150px; height: 80px; line-height: 80px; display: block; background: #3498db; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; } .btn_03:hover { background: #9b59b6; }
横に回転するボタン
カーソルをのせると横にくるっと回るボタンです。
「transform」プロパティを使い「rotate(360deg)」の数字で回転する角度を決めます。
.btn_04 { width: 150px; height: 80px; line-height: 80px; display: block; background: #f1c40f; color: #fff; transition: all 1s ease; -webkit-transition: all 1s ease; } .btn_04:hover { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
迫ってくるボタン
カーソルをのせるとこちら側に迫ってくるボタンです。
「transform」プロパティを使い「scale(1.2)」の数字でサイズを決めます。
気になるあの娘の写真でやると…
.btn_05 { width: 150px; height: 80px; line-height: 80px; display: block; background: #e67e22; color: #fff; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; } .btn_05:hover { transform: scale(1.2); -webkit-transform: scale(1.2); }
回転扉ボタン
カーソルをのせると横にくるっと回るボタンです。
「transform」プロパティを使い「rotateY(360deg)」の数字で回転する角度を決めます。
.btn_06 { width: 150px; height: 80px; line-height: 80px; display: block; background: #e74c3c; position: relative; transition: 0.8s ease-out; -webkit-transition: 0.8s ease-out; } .btn_06:hover { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }
プロパティ指定で色々応用が出来ます
「transition」の動作を「ease-in」指定することで”ゆっくりと開始”します
「perspective」プロパティを追加することで、三次元の動きになります。
「transition」の動作を「linear」指定することで”一定の速度で”動作します
「自社のサイトにもほしい!けど使い方がわからない」「サイト全体を回し続けたい!」などという方はふるってお問い合わせください。

やす

最新記事 by やす (全て見る)
- CSS3アニメーションを使って魅せるボタンを実装しよう!! - 2014年2月28日
- ページ移動をかっこよく演出するjQueryプラグイン「fadeMover」のご紹介 - 2014年1月30日
- Data URI Schemeで画像を埋め込み、サイトを高速化しよう! - 2013年12月27日
- スマホの実機検証で悩むあなたへ!クラウド型端末検証サービス「Remote TestKit」が便利だよ - 2013年11月19日
- カイエ・蕎麦ージュ - 2013年6月5日
株式会社エレメントのサイトが新しくなりました!
スタッフが更新する最新情報・ブログはこちらからご確認いただけます。
[…] CSS3アニメーションを使って魅せるボタンを実装しよう!! […]
[…] http://elmt.jp/web/2930/ […]