fotodeo

今回は前回検索フォームを最低限の部品で作りましたが、味気ないので検索の上にマウスが来たらアニメーションするボタンを作ろうかなぁと思ってちょっと作ってみます。

アクションの説明

ボタンにホバーすれば左右に幕が開きながらボタン背景をフェードアウト（白抜き）にしようかと思います。

ボタンの幅は200pxで高さは60px

ボタン背景はグレーで幕はグリーンになります。

-CSS-

.btn_maku,.btn_maku::before,.btn_maku::after {
    transition: all .5s;
}
.btn_maku {        
    position: relative;
    display: inline-block;
    width: 200px;
    height: 60px;        
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    outline: none;
    z-index: 2;
    background-color: #333;
    border: 2px solid #333;
    border-radius: 5px;
    color: #fff;
}
.btn_maku::before,.btn_maku::after {
    display: block;
    position: absolute;
    content: '';
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
}
.btn_maku::before {right: 0;}
.btn_maku::after {left: 0;}


.btn_maku:hover {
    background-color: #fff;
    border-color: #319981;
    color: #319981;
}
.btn_maku:hover::before,.btn_maku:hover::after {
    width: 0;
    background-color: #319981;
}

フェードアウトや幕の動くアニメーションは『transition』を使用して0.5s掛けて動くようにしています。

.btn_maku::before,.btn_maku::after {
        display: block;
        position: absolute;
        content: '';
        top: 0;
        width: 50%;
        height: 100%;
        z-index: -1;
    }
    .btn_maku::before {right: 0;}
    .btn_maku::after {left: 0;}

アニメーションをさせるために重要な部分は上記部になります。

ボタンに対して疑似要素のbiforeとafterを使ってボタンの中心である５０％から外に向かって（０座標）二つの箱を作っています。

これでボタン自体は背景がグレーから白に変化していきますが、幕は左右に広がるように緑色の範囲が左右に少しずつ減っていって開くように見えます。

-HTML-

<a class="btn_maku" href="#"><b>テストボタン</b></a>

というわけでHTML部はaタグにクラスを付けてやれば完成です。

-実行結果-

こんな感じになりました。

まとめ

今回ボタンのサイズが(200,60）サイズの固定なのですがwidthとheightを別クラスにしていろんなサイズに対応させてもいいかもですね♪

私はこれを検索ボタンに使用しようと思っています。虫眼鏡ボタンにしたいのでテキストでは使わないと思いますが、簡単に色々変えれるので試してみてください。