UPLINE — Back to Top
UPLINE。縦長スリム / 62 × 119。通常時：細線内の明るい部分が上に移動。ホバー：左のラインが強まり、全体の色が反転。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: continuous
48 items条件に一致する公開素材
SIDE METER — Back to Top
SIDE METER。右サイド進捗 / 57 × 155。通常時：ページの実スクロール量でメーターが伸びる。ホバー：サイドの縁が強調され、矢印が上昇。
OFFSET TILE — Back to Top
OFFSET TILE。オフセット正方形 / 82 × 82。通常時：影がごくゆっくり呼吸し立体感が変わる。ホバー：本体が3px持ち上がり影が定着。
EDGE GLOW — Back to Top
EDGE GLOW。右サイドレール / 50 × 148。通常時：サイドの光が上へ流れ、しばらく休止。ホバー：左へ6px開いて影が柔らかくなる。
ELEVATED — Back to Top
ELEVATED。浮遊スクエア / 82 × 82。通常時：光と影のコントラストが静かに呼吸。ホバー：本体が3px浮いて影が増す。
READING RING — Back to Top
READING RING。進捗リング / 90 × 90。通常時：実スクロール進捗に連動、矢印に穏やかな合図。ホバー：輪郭が太くなり、矢印にアクセント色。
SIGNAL BAR — Back to Top
SIGNAL BAR。横長コンパクト / 168 × 54。通常時：小さな三つの点が順番に明るくなる。ホバー：右の矢印が上昇し、黒から柔らかい緑へ。
FINE PILL — Back to Top
FINE PILL。アウトラインピル / 166 × 55。通常時：周囲の枠にさりげない反射が流れる。ホバー：背景色と文字色がゆっくり入れ替わる。
TWIN RULE — Back to Top
TWIN RULE。上下罫線 / 174 × 55。通常時：上の線を短いアクセントが横移動。ホバー：線幅が変化し矢印が上昇。
FOOTER DOCK — Back to Top
FOOTER DOCK。フッター組込 / 224 × 60。通常時：下辺に沿って短い光がゆっくり走る。ホバー：文字と矢印がわずかに上昇。
DUOTONE — Back to Top
DUOTONE。二段タイル / 75 × 84。通常時：上下を仕切る線がわずかに往復。ホバー：上の矢印領域が少し広がる。
LUMEN — Back to Top
LUMEN。ガラスピル / 184 × 61。通常時：薄い反射の帯が間隔を空けて移動。ホバー：透過感と縁の色を滑らかに変える。