Monogram / Overscale — Back to Top
大型の上向き記号と余白を生かしたタイポグラフィ主体のボタン。通常時：金色の下線がゆっくり左右へ移動。ホバー：大きな矢印が緩やかに上昇し、下線が伸びる。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: continuous
48 items条件に一致する公開素材
Transit / Split Bar — Back to Top
横長の文字領域と独立した操作領域を持つ分割ボタン。通常時：境界線に沿って細いラインが動く。ホバー：アクセント部分が広がり、矢印の向きと位置が変化。
Luma / Light Sweep — Back to Top
光を抑えたダークパネルと大きな文字を組み合わせたサイン型。通常時：反射光が時間をかけて表面を横切る。ホバー：ボタンが浮き上がり、下側に暖色の光が現れる。
Meter / Volume Dial — Back to Top
スクロール量を数値と円弧で示す進捗ダイヤル。通常時：実際のスクロール率に合わせて円弧と数字が変化。ホバー：外周を強調し、表示の色が穏やかに変わる。
Editorial / Rule Break — Back to Top
セリフ書体と細い罫線を使ったエディトリアル型。通常時：細い線が伸びた後に静止する。ホバー：文字と罫線の強弱が切り替わり、矢印が移動する。
Railway / Slide Rail — Back to Top
縦のレールと目盛りを組み合わせたサイド型のナビゲーション。通常時：目印がレールをゆっくり移動し、短く停止。ホバー：文字と矢印が段階的に移動する。
Ink / Circular Seal — Back to Top
中央の矢印を静止させた、印章のような円形デザイン。通常時：外周の文字がゆっくり回転。ホバー：円盤が浮き上がり、下のリングが見える。
Neon / Data Capsule — Back to Top
控えめな工業系の文字組みと状態ランプを備えたカプセル型。通常時：緑の小さな光がゆっくり明滅。ホバー：輪郭に光が加わり、本体がわずかに浮く。
Contour / Corner Dock — Back to Top
斜めに切り取った角部を生かしたコーナー固定型。通常時：輪郭の色が下から上へ変化する。ホバー：角のグラフィックが開き、矢印を強調する。
Orbit / Twin Rings — Back to Top
矢印を中央に固定した二重リング型。通常時：二つの円弧が異なる速さでゆっくり回転。ホバー：円弧が広がり、中心の色が変化する。
Receipt / Index Card — Back to Top
紙のカードを思わせる余白と落ち着いた文字組み。通常時：短い下線がゆっくり移動し、途中で止まる。ホバー：影が濃くなり、矢印が浮き上がる。
Signal / Three Lanes — Back to Top
上昇方向を三本の信号ラインで示す図形型。通常時：三本のラインが時間差で上昇する。ホバー：ラインが一つの流れる形へまとまる。
Column / Typographic Stack — Back to Top
十分な字幅を確保した縦型タイポグラフィ。通常時：背面の色面が穏やかに濃淡を変える。ホバー：文字の整列を保ったまま全体が少し上昇する。
Ceramic / Glazed Stone — Back to Top
陶器を思わせる丸みと表面の質感を持つ角形。通常時：光沢が表面を静かに横切る。ホバー：表面が落ち着いた色に変わり、アイコンが浮く。
Swiss / Numeric Return — Back to Top
数字と記号の非対称な配置を生かしたグリッド型。通常時：大きな数字に小さな光と動きが入る。ホバー：数字と矢印の視覚的な強弱が入れ替わる。
Marquee / Counterflow — Back to Top
読みやすいティッカー文字と操作端を分けた横長型。通常時：帯の内側で文字がゆっくり流れる。ホバー：文字が停止し、オレンジ色の端部が伸びる。
Accent / Loose Bracket — Back to Top
四隅を閉じずに抜け感を出したオープンフレーム。通常時：開いた端に沿って弱い光が移動する。ホバー：向かい合う角がゆっくり近づく。
Terrain / Rising Line — Back to Top
上昇を示す稜線と読みやすい文字を組み合わせた形。通常時：傾斜した線がわずかに上がって落ち着く。ホバー：稜線が簡潔な上向き矢印へと変わる。