コーディング

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

2017.10.28

グラデーションであしらったボタンを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.

まとめ

グラデーションを上手く制御できると、面白い動きを実装することができます。角度のついたグラデーションなども実装できるので、参考にしてみてください。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。