Sliding Measurement CTA
計測目盛りが伸び、数値が更新されたように見える設計資料向けCTA。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
300 items条件に一致する公開素材
Vertical Reading Marker
縦組みの短い見出しをホバーすると横組みの補足見出しが現れる、和文エディトリアル向けリンク。
Inline Glossary Rail
専門用語のリンクにホバーすると横に定義ラベルが滑り出す、技術記事向け表現。
Selective Blur Gallery
写真をぼかしながら中央の円形窓だけを鮮明に残す、ギャラリーの注目誘導。
Envelope Seal Reveal
封筒のフラップが開き、問い合わせのアイコンが顔を出すメール誘導ボタン。
Quotation Margin Echo
お客様の声カードにホバーすると大きな引用符が現れ、引用テキストが整う。
Project Receipt Pullout
実績カードの下から成果情報を記載したレシート風パネルが引き出される。
Photo Coordinate Overlay
画像にカーソルを乗せると構図の測定線と撮影情報が現れる、建築・作品紹介向け。
Alphabet Index Unfold
アルファベット索引をホバーすると該当文字の説明が横に現れる。
Stacked Destination Menu
ナビ項目の裏に重なった行き先ラベルがホバー時に段差を付けて現れる。
Comparison Row Highlight
仕様比較の行にマウスを乗せると行全体が浮き、要点ラベルが強調される。
Paperclip Attachment Lift
クリップの線画が持ち上がり、添付資料を示す小さなラベルが現れる。
Citation Footnote Bloom
記事の注釈番号をホバーすると、小さな書誌情報カードが横に開く引用リンク。
Vertical Shutter Photograph
縦型の細いシャッターが順に開き、背面の別ビジュアルを見せる画像ホバー。
Ruby Note Reveal
見出しの上に小さな補足読み・英語ラベルが現れる。文字の読解を助けるホバー。
Parallel Arrow Rails
2本の平行レール上をアイコンがすれ違うように移動する、資料・詳細リンク向けボタン。
Foreground Depth Portrait
人物のシルエットが背景の図形から手前に浮き出し、奥行きの差で人物紹介を強調。
Tapered Ribbon Action
ボタンの両端にリボン状の折り返しが現れ、行動を促すラベルをすっきり強調。