CORNER RETURN — Back to Top
フッター右側に配置しやすい横長の小さなプレート。余白とボーダーで自然に区切る。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: button ／ 用途: navigation
59 items条件に一致する公開素材
RETURN TYPE — Back to Top
極端に細くせず、読みやすい大きさの「BACK TO TOP」を使う横長タイプ。
FOLDED CARD — Back to Top
紙の角をほんの少し折った、ほどよく遊び心のあるカード型。矢印は加えず文字で伝える。
EDGE RIBBON — Back to Top
ページ端に置くことを想定した、短めの濃色リボン。文字を十分な大きさで見せる。
DOUBLE LIFT — Back to Top
二段の山形サインを収めたコンパクトな角丸ボタン。形は明快、演出は短く。
SPLIT PILL — Back to Top
矢印と文字を左右の異なる面に分けた、約140pxの横長ピル。普段は静かで、触れると矢印だけが動く。
COLUMN GUIDE — Back to Top
太さのある縦帯と読みやすい縦組文字。細線ではなく側面のメニューとして成立する。
先頭へ — Back to Top
自然な日本語「先頭へ」を読みやすい大きさで組む。句読点のような小さな矢印と余白だけを使用。
DIAMOND UP — Back to Top
回転した菱形の輪郭に、正立したTOP。二重四角の繰り返しではない独立した形。
OPEN ARCH — Back to Top
上側がアーチになった輪郭と短い案内文字。正円より縦方向の流れが感じられる。
READING 100 — Back to Top
読む位置を小さな数値と進捗バーで示す。見た目の遊びではなく、機能から生まれたデザイン。
TICKET RETURN — Back to Top
切り欠きのある小さな紙片。矢印を足さず、「TOP」の印刷文字で機能を示す。
SERIF ASCENT — Back to Top
セリフ体の大きな上向きサインと、余白を活かしたTO TOP。少し存在感のある文字設計。
INSET TILE — Back to Top
彩度を抑えた正方形の内側に繊細な枠を重ねる。適度な存在感がありながら、フッターやサイドにも馴染む。
SWEEP / RETURN — Back to Top
硬い罫線ではなくゆるい曲線と文字で構成。柔らかいトーンだが文字ははっきり読める。
LITTLE CLOUD — Back to Top
少しだけ遊び心を持たせた、約80pxの雲形。顔や装飾を増やさずTOPを読みやすく置く。
INK SEAL — Back to Top
深い墨色の円と控えめな光の縁。小さくても輪郭が明瞭なスタンプ型。
BASELINE DOCK — Back to Top
フッターの境界罫と自然につながる横長の案内。配置の中で成立するタイプ。