グラデーションであしらったボタンをcssで簡単にアニメーションさせる方法

デザイナーからボタンのあしらいにグラデーションを使ったデザインが上がってきた場合、以前であれば背景を画像にせざるを得ませんでしたが、css3普及以降はlinear-gradientで画像を使わず実現することができるようになりました。その場合、マウスオーバー状態のあしらいについてもcssでスマートに実装したいものです。今回はそんな時に提案できる動きのあるグラデーションのマウスオンアクションを紹介します。

グラデーションからグラデーションへ遷移するマウスオンアクション

まずは動きを見てみましょう。あとの説明をわかりやすくするために少し横幅を狭めて見た目が不格好ですがご了承ください。

See the Pen POYRpr by hoshu_t (@hoshu_t) on CodePen.

くすんだ色味のグラーデーションから明るい色味のグラデーションへ、流れるように遷移しています。linear-gradientはそのままではtransitionで動きを加える事はできませんが、backgroundに大きいサイズで描画し、それをbackground-positionで操作することによってこの動きを実現しています。
構造をわかりやすくした図をご確認ください。

See the Pen VrZXKG by hoshu_t (@hoshu_t) on CodePen.

上段のオブジェクトはグラデーションの全体図、下段のオブジェクトは先ほどの見本と同じボタンです。まずアニメーションを見越して大きいサイズのグラデーションを作ります。色の遷移は

「マウスOFF時の左端からマウスOFF時の右端」
「マウスOFF時の右端からマウスON時の左端」
「マウスON時の左端からマウスON時の右端」

という順につなげて設定します。設定の際にbackground-size:300% 100%;とすることで、見える範囲を「ボタンOFF時の左端からボタンOFF時の右端」に限定しているのがポイントです。あとはマウスオン時のbackground-positionで、見せたい範囲を操作することで完成です。

この方法を使うと下図のような複雑な色変化も実現できます。

See the Pen yPBjVK by hoshu_t (@hoshu_t) on CodePen.