中心から下線が伸びる
リンクの中央から左右へ下線が広がります。
CSS hover アニメーションサンプル集
リンク、ボタン、カード、画像などに使える hover アニメーションを一覧で確認できます。
左から右に下線が伸びる
左端を起点に下線がスライドします。
背景が左から伸びる
テキストリンクの背景が左から塗られます。
線が伸びて枠線になる
下線のあとに枠線が現れるリンク表現です。
文字が少し上に動く
軽い移動でクリックできる感触を出します。
テキストが入れ替わる
英語表記から日本語表記へ切り替わります。
背景が左から右に流れる
CTAに使いやすい塗りの hover です。
背景が中央から広がる
中央を起点に背景色が横へ広がります。
下に押し込まれる
押下感のあるシンプルなボタンです。
右下に押し込まれる
右下へ動いて立体感を出します。
影がついて浮き上がる
影と移動で手前に浮いたように見せます。
光が横切る
斜めの光がボタン上を横切ります。
波紋が広がる
中心から薄い波紋が広がる hover です。
カードが浮き上がる
カード全体が少し上へ移動します。
Card TitleHover sample
画像が拡大する
カード内の画像だけをズームします。
Card Title
影が濃くなる
影を強めてクリック可能な印象を作ります。
Card TitleHover sample
テキストが上に移動する
本文エリアだけが上へスライドします。
Card TitleHover sample
詳しく見るボタンが出る
hover でアクションボタンを表示します。
画像がズームする
画像を拡大して動きを出します。
画像が暗くなって文字が出る
暗いオーバーレイと文字を表示します。
View More
画像がぼかされる
hover で画像にぼかしを加えます。
画像が明るくなる
画像の明るさと彩度を上げます。