CSSのみでボタンにアニメーションを加える方法 – 応用編 –

こんにちは、寒くなってきましたね。皆様いかがお過ごしでしょうか。
最近モバイルディスプレイを購入しテレワーク生活が充実し始めているECCUBERの渡部です。

前回EC-CUBEテンプレートのカートボタンをCSSのみでカスタマイズしました。

今回は前回の応用で3パターン作成しました。HTMLコードを書き換え無いのでコピペでも使用できると思います。

ということで、カートボタンをCSSのみでカスタマイズパターンをお見せします。

色の重なりのあるボタン

ボタンの影として使用したり、ボタンの上に透過フィルターを重ねてオンマウス時に色を変えたり、位置を変えたりできます。

上記は以下の内容で作成できます。

Buttonタグ内に:before（黄背景）:after（青背景）で疑似要素作成。
position: absoluteでボタン内に重ねる。（z-indexで階層調整）
topとleft要素で位置を変更。(:beforeはマイナス値、:afterはプラス値で設定)
transitionでアニメーション補完。

ボタンは上記で作成します。
その後:hover時にtopとleftを0にすると、重なりがそろいます。
:after要素が現在が背景上最前面にいるため色を変えてあげます。

CSSのソースは以下になります。

button.ec-blockBtn--action.add-cart {
    margin-bottom: 30px;
    position: relative;
}

button.ec-blockBtn--action.add-cart:before,
button.ec-blockBtn--action.add-cart:after {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

button.ec-blockBtn--action.add-cart:before {
    background: rgba(247, 255, 0, 0.8);
    top: -10px;
    left: -10px;
    z-index: -1;
}
button.ec-blockBtn--action.add-cart:hover:before {
    top: 0;
    left: 0;
}

button.ec-blockBtn--action.add-cart:after {
    background: rgba(0, 28, 140, 0.8);
    top: 10px;
    left: 10px;
    z-index: -1;
}
button.ec-blockBtn--action.add-cart:hover:after {
    top: 0;
    left: 0;
    background: rgba(222, 93, 80, 1);
}

Backgroundのrgbaを変更すると色変更できます。
R（赤）G（緑）B（青）A（透過度）で設定可能です。今回はtopとleftで設定していますが、bottomやrightやmargin等でも位置変更できます。

ボタンにボーダーラインを付ける

オンマウス時に前回の応用でボタンの右中央に短い線を入れたりもできます。

上記は以下の内容で作成できます。

Buttonタグ内に:before（内側の枠線）:after（横線、この時点では横幅0）で疑似要素作成。
position: absoluteでボタン内に重ねる。（z-indexで階層調整）
topとleft要素で位置を変更。(:afterはrightで設定)
transitionでアニメーション補完。

ボタンは上記で作成します。
その後:hover時に:afterの横幅を40pxにします。
そうするとオンマウス時に枠線が縮まるのと同時に横線がニョキっと出てきます。

button.ec-blockBtn--action.add-cart {
    margin-bottom: 30px;
    position: relative;
}
button.ec-blockBtn--action.add-cart:before,
button.ec-blockBtn--action.add-cart:after {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    content: "";
    position: absolute;
}

button.ec-blockBtn--action.add-cart:before {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #FFFFFF;
    border: 1px solid #FFFFFF;
    -webkit-transform: scale(0.98,0.9);
    -moz-transform: scale(0.98,0.9);
    -ms-transform: scale(0.98,0.9);
    -o-transform: scale(0.98,0.9);
    transform: scale(0.98,0.9);
}
button.ec-blockBtn--action.add-cart:hover:before {
    border: 1px solid #FFFFFF;
    -webkit-transform: scale(0.9,0.7);
    -moz-transform: scale(0.9,0.7);
    -ms-transform: scale(0.9,0.7);
    -o-transform: scale(0.9,0.7);
    transform: scale(0.9,0.7);
}

button.ec-blockBtn--action.add-cart:after {
    width: 0;
    height: 1px;
    background: #FFFFFF;
    top: calc(50% - 1px);
    right: 0;
}
button.ec-blockBtn--action.add-cart:hover:after {
    width: 40px;
}

今回の横線は高さ1pxにした:after要素の背景色を白くしています。単純にborderを使用する場合はborder-topかborder-bottomを1pxで設定することでも再現できます。

ちなみにここでcalc()という要素を使用していますが、これはベースの値に四則演算を加えることのできる便利なやつです。これについてはまた別の機会にお話します。

背景が横スライドする

最後はオンマウス時に背景が横にニョキ～と伸びるボタンです。

ちょっと画像ではわかりづらいですね。

イメージはこんな感じとなります。

オンマウス時にボタン左横の黄色と青の背景が横にニョキ～っと伸びるようにします。
その際に伸びるタイミングに時差やスピードを付けてあげると面白いですよ。

上記は以下の内容で作成できます。

Buttonタグ内に:before（黄色背景5%）:after（青背景2.5%）で疑似要素作成。
position: absoluteでボタン内に重ねる。（z-indexで階層調整）
topとleft要素で位置を変更。(値は両方0)
transitionでアニメーション補完。(この時:beforeと:afterで補完時間を変えます。)

ボタンは上記で作成します。

その後:hover時に:beforeと:afterの横幅を100%にします。
そうするとオンマウス時にニョキ～っと伸びます。
今回は:beforeを0.3s、:afterを0.7sの時間設定にしてますので黄色が先に横幅100%になった後、青が追いつくか体になっています。

button.ec-blockBtn--action.add-cart {
    margin-bottom: 30px;
    position: relative;
    z-index: 0;
}
button.ec-blockBtn--action.add-cart:before {
    background: rgba(247, 255, 0, 0.8);
    content: "";
    display: block;
    position: absolute;
    width: 5%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
button.ec-blockBtn--action.add-cart:after {
    background: rgba(0, 28, 140, 0.8);
    content: "";
    display: block;
    position: absolute;
    width: 2.5%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}
button.ec-blockBtn--action.add-cart:hover:before,
button.ec-blockBtn--action.add-cart:hover:after {
    width: 100%;
}

こちらをうまく応用すると、キランと光って切るような変出も可能だったりします。
まぁその場合はさすがにHTMLにも手を加えないと厳しいですかね。

最後に

最後までご覧いただきありがとうございます。

こんな感じで2回の記事で使用したCSSを応用することで動きのあるかっこいいボタン（今回のボタンはあんまりかっこよくないかもですが。）を作ることができます。

CSS奥深いですね～。さらに深淵があります。CSSだけで3D立方体をくるくるさせるとか。それはまたの機会に。
2回書きましたが、やっぱり、CSSの話をやっているのに見た目がキャプチャだけってしんどいですね。

次回以降は何か方法考えようと思います。コードペンか、新たなプラグインか。

次回は表（テーブル）のスマホ表示する場合どうするか？のあたりをお話しようと思います。

EC-CUBEのことはEC-CUBEのプロ「EC-CUBER」にご相談ください！
https://ec-cuber.jp/contact-us/

キーワード

CSS EC-CUBE4系デザインフロントフロント画面カスタマイズ