BASELINE DOCK — Back to Top
フッターの境界罫と自然につながる横長の案内。配置の中で成立するタイプ。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: button ／ 技術: javascript
59 items条件に一致する公開素材
FOLDED TAB — Back to Top
紙の角を折り返したような控えめなタブ。印刷物のような品の良さを持つ。
LIFT CONTROL — Back to Top
細線ではなく、指で操作する小さなレバーのような縦長のシルエット。
CHEVRON TILE — Back to Top
明快な色面の正方形。矢印をただ貼るのではなく、余白と角度で方向を示す。
ELLIPSE ROUTE — Back to Top
横長の楕円と一点だけの色アクセント。丸型よりも水平の余韻がある。
UP / RETURN — Back to Top
文字サイズに変化をつけたタイポグラフィ型。線の飾りよりも文字の造形を活かす。
トップへ戻る — Back to Top
視線を遮らない日本語の文言と横罫。小さすぎない文字で案内の役割を優先。
SUNRISE — Back to Top
地平線から昇る小さな太陽。業種を強引に象徴せず、穏やかな上昇感を描く。
FLIP DISPLAY — Back to Top
小さな反転表示器を思わせる長方形。文字の視認性と情報感を優先。
SPEECH CLOUD — Back to Top
控えめな吹き出しと短い文字。遊び心のある1件として変化を加える。
READING ARC — Back to Top
半円ゲージで現在位置を示す。百分率を大きく掲げず、落ち着いた案内にする。
LINE / TOP — Back to Top
余白に置く、細い縦罫と小さなTOP。文字は控えめで、ボタンの輪郭を持たない。
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。