CSS3アニメーションを使って魅せるボタンを実装しよう!!

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」指定することで”一定の速度で”動作します

「自社のサイトにもほしい！けど使い方がわからない」「サイト全体を回し続けたい！」などという方はふるってお問い合わせください。

この記事を書いた人
最新の記事

やす

夏は薪を拾ったり割ったりし、冬はそれを燃やして暖をとる生活に憧れて、北海道にやってきました。好きな生き物は酵母菌、中でもサッカロミセス･セレビシエが好みです。

株式会社エレメント