Yuzu Bottle — 商品の一部
画面をスクロールすると瓶が現れ、泡が浮かぶ。ボタンは商品そのもの。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: button ／ 技術: javascript
71 items条件に一致する公開素材
Tanuki Guide — ご案内係
画像で描いたタヌキがふわっと歩き、ホバーで旗を掲げて案内する。
Editorial Masthead — 大きな書体
矢印も「TOP」も使わない。新聞の見出しのような大きな「FIRST PAGE」。
Index Return — 企業サイト
右端のインデックスに収めた戻り導線。線と数字の変化だけで伝える。
Red Seal — 和の印章
朱印が押されるようなホバー。サイトの静けさを壊さない文字一体型。
Festival Word — ポスター文字
印刷ポスター風の文字ボタンが常に微妙に揺れ、ホバーで色と形が切り替わる。
Footer Handoff — フッター導線
浮動ボタンではなく、フッターを構成する大きなリンク。ページ末尾で初めて現れる。
Soft Current — 変形する水滴
何もしなくても色と輪郭がゆっくり変わる。ホバーで横長ラベルに展開。
Vinyl Return — レコード
小さな盤面がゆっくり回る。クリックする機能とサイトの主題を一体化。
Architecture Edge — 端のルーラー
画面側面の定規が伸びる。細すぎず、実際に押せるサイズを確保。
Book Jacket — 表紙へ
本の帯・しおりをイメージ。ページをめくるように角が立ち上がる。
Progress Column — スクロール量
スクロール量を縦方向に可視化。「戻る」動作そのものをUIにする。
マージンノート — ページトップボタン
ページ余白に置く短い罫線とセリフ体の文字。編集記事になじむ左下配置のページトップリンク。
シビックタイル — ページトップボタン
矢印と文字を分けた実用的なタイル型。押しやすさと視認性を優先したページトップボタン。
ファインレール — ページトップボタン
縦長の細いレールに矢印と文字を整えた、建築・設計サイト向けのページトップボタン。
シグナルディスク — ページトップボタン
円形を潔く使った視認性の高いページトップボタン。小さなラベルと矢印の比率を調整。
リビールエッジ — ページトップボタン
画面右端に沿うタブが、ホバーやフォーカスで横方向へ開くページトップボタン。
コーナーブラケット — ページトップボタン
コーナー線をモチーフにした、工業的で簡潔なページトップボタン。