ブログBlog

CSS:hover時にふわっとグラデーションさせる方法
「グラデーション機能を使ったボタン」を制作し、マウスでホバーされた際に、「さらに別のグラデーション」を使って、ふわっと光が当たっている箇所が変わるような表現を実現したいと思ったところ、CSSのtransition(徐々に変化させる)が効かない事象に遭遇しました。
(調べたところ、このtransitionが効かないの事象は仕様のようです。)
そのため、考えた結果、別のやり方で実現できましたので、そのやり方について今回は共有させて頂こうと思います。

1.発生する事象とソースの内容

「グラデーション」をかけたボタンに対し、hoverされた際の疑似要素に「別のグラデーション」をかけます。
ふわっとした表現をしたいので、transition(徐々に変化させる)をかけますが、残念ながらこのtransitionが効きません。

HTML

CSS

 
これはどうやら仕様のようなので、別のやり方で実現しました。
 

2.hover時にふわっとグラデーションをかける事ができたボタン

ポイントは、beforeとafterの疑似要素を使い、3枚重ね合わせたボタンを作成し、z-indexで重なりの順番を指定。さらにbeforeの疑似要素にtransitionをかけ、hover時には、beforeをopacityで透過させるやり方となります。
なお、bodyに背景が指定されている場合には、ボタンの文字が後ろに下がってしまうためspanなどで括り、z-indexで上に持ってくる必要があります。

HTML

 

CSS

 

3.考え方

考え方は、こんなイメージです。
hover時にふわっとグラデーションさせる方法

「ボタン本体」は透過させていますので、beforeが表示されています。
さらに、hoverされた際には、beforeに対しopacity:0を指定しているため、beforeが透過され、afterが表示されます。
また、このbeforeには、transitionが指定されていますので、ふわっとグラデーションをかけたように表現する事ができます。
困ってこのページにたどり着いた人は、試してみてください。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU