LINE / TOP — Back to Top
余白に置く、細い縦罫と小さなTOP。文字は控えめで、ボタンの輪郭を持たない。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: scroll-triggered
48 items条件に一致する公開素材
CIRCLE / UP — Back to Top
線幅と円の比率を調整した、汎用性の高い極小の円形。
EDITORIAL — Back to Top
文字の美しさを主役にした文字のみのタイプ。セリフ体と極細の下線。
VERTICAL — Back to Top
すらりとした縦長カプセルと縦組の最小限のタイポグラフィ。
EDGE TAB — Back to Top
画面端に少しだけ覗くサイドタブ。通常時は目立たず、操作位置を覚えやすい。
PROGRESS — Back to Top
読む量を可視化する外周リング。小さくても役割があるデザイン。
TYPE SHIFT — Back to Top
二段の文字組みに限定した、軽い遊び心のあるUI。
FOUR CORNERS — Back to Top
四隅の線と中央の小さな上方向のサイン。図形は主張しすぎない。
上へ — Back to Top
小さな日本語と短い縦線。言葉と余白だけで機能が伝わる。
RISING BARS — Back to Top
繊細な三本のラインと小さなTOP。装飾でなく方向のヒントとして使う。
PAPER FLIGHT — Back to Top
1点だけの軽いイラスト表現。小さな紙飛行機と細い飛跡を丁寧にまとめる。
FOOTER SIGN — Back to Top
フッターのナビゲーションにも置きやすい、極細ライン＋文字の一体型。