SERIF ASCENT — Back to Top
セリフ体の大きな上向きサインと、余白を活かしたTO TOP。少し存在感のある文字設計。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: scroll-triggered
48 items条件に一致する公開素材
INSET TILE — Back to Top
彩度を抑えた正方形の内側に繊細な枠を重ねる。適度な存在感がありながら、フッターやサイドにも馴染む。
SWEEP / RETURN — Back to Top
硬い罫線ではなくゆるい曲線と文字で構成。柔らかいトーンだが文字ははっきり読める。
TICKET RETURN — Back to Top
切り欠きのある小さな紙片。矢印を足さず、「TOP」の印刷文字で機能を示す。
STEP SIGNAL — Back to Top
三段に並ぶ小さな面で「戻る方向」を暗示。細点ではなく十分な太さのある配列。
LITTLE CLOUD — Back to Top
少しだけ遊び心を持たせた、約80pxの雲形。顔や装飾を増やさずTOPを読みやすく置く。
INK SEAL — Back to Top
深い墨色の円と控えめな光の縁。小さくても輪郭が明瞭なスタンプ型。
BASELINE DOCK — Back to Top
フッターの境界罫と自然につながる横長の案内。配置の中で成立するタイプ。
FOLDED TAB — Back to Top
紙の角を折り返したような控えめなタブ。印刷物のような品の良さを持つ。
LIFT CONTROL — Back to Top
細線ではなく、指で操作する小さなレバーのような縦長のシルエット。
CHEVRON TILE — Back to Top
明快な色面の正方形。矢印をただ貼るのではなく、余白と角度で方向を示す。
ELLIPSE ROUTE — Back to Top
横長の楕円と一点だけの色アクセント。丸型よりも水平の余韻がある。
トップへ戻る — Back to Top
視線を遮らない日本語の文言と横罫。小さすぎない文字で案内の役割を優先。
UP / RETURN — Back to Top
文字サイズに変化をつけたタイポグラフィ型。線の飾りよりも文字の造形を活かす。
SPEECH CLOUD — Back to Top
控えめな吹き出しと短い文字。遊び心のある1件として変化を加える。
SUNRISE — Back to Top
地平線から昇る小さな太陽。業種を強引に象徴せず、穏やかな上昇感を描く。
FLIP DISPLAY — Back to Top
小さな反転表示器を思わせる長方形。文字の視認性と情報感を優先。
READING ARC — Back to Top
半円ゲージで現在位置を示す。百分率を大きく掲げず、落ち着いた案内にする。