Compass / North Point — Back to Top
上向きの方位記号を中心に据えたナビゲーション型。通常時：針がわずかに傾き、元の角度へ戻る。ホバー：針が正面を向き、周囲の光輪が広がる。
PRACTICAL WEB TIPS
ページトップボタンのデザイン
Webサイトの先頭へ戻る48種類のボタン。デザインを見比べ、スクロール・ホバー・クリックを試して、HTML・CSS・JavaScriptを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：動き: continuous
48 items条件に一致する公開素材
Ribbon / Track — Back to Top
ページ下部にもなじむ横長のリボン型。通常時：文字の下を細いラインが進む。ホバー：矢印が文字のラインを横切る。
Gallery / Floating Tab — Back to Top
画面端に組み込む、可読性を持った縦型タブ。通常時：タブ内の細いラインがゆっくり充填される。ホバー：画面端から少し引き出され、アクセントが現れる。
Soft Signal / Aurora — Back to Top
やわらかなグラデーションと明確な輪郭を持つ汎用ボタン。通常時：内部のグラデーションが穏やかに移動。ホバー：輪郭が濃い色へ変わり、わずかに広がる。
Finale / Footer Elevator — Back to Top
フッターの幅いっぱいに広がる一体型の先頭復帰バー。通常時：長い罫線の上を目印が移動する。ホバー：右端の操作パネルが持ち上がり、文字が移動する。
Precision / Mechanical — Back to Top
金属プレートのような階層と質感を備えた機械的な造形。通常時：内側の表面を控えめな反射が横切る。ホバー：プレートが締まり、影の深さが変化する。
ASCENDER — Back to Top
ASCENDER。タイポグラフィ / 168 × 64。通常時：6.8秒ごとに上昇線がゆっくり伸び、短く静止。ホバー：文字の下線が広がり、矢印が上昇。
SIDE RIBBON — Back to Top
SIDE RIBBON。右サイドタブ / 54 × 136。通常時：左側の短いインジケータがゆっくり上がる。ホバー：左へ8pxほど引き出され、色が深まる。
SOFT PILL — Back to Top
SOFT PILL。横長ピル / 184 × 58。通常時：矢印に控えめな上昇モーションを短く挿入。ホバー：左の円に色が広がり、文字が少し移動。
EDITORIAL LINE — Back to Top
EDITORIAL LINE。文字とライン / 179 × 57。通常時：下線の一部だけが時間をかけて移動。ホバー：矢印が伸び、下線の色が変わる。
HALO — Back to Top
HALO。二重円形 / 84 × 84。通常時：外輪が1回だけ広がり、薄く消える。ホバー：外輪が近づき、内側が静かに濃くなる。
MONO CORNER — Back to Top
MONO CORNER。角丸正方形 / 72 × 72。通常時：上縁を小さな光点がゆっくり横断。ホバー：内側の線と背景が入れ替わる。
ORBIT RING — Back to Top
ORBIT RING。輪郭円 / 92 × 92。通常時：外輪の短い弧がゆっくり巡る。ホバー：リングが引き締まり、中央の矢印が上昇。
INK FRAME — Back to Top
INK FRAME。正方形 / 78 × 78。通常時：細い光が左縁を上に流れ、余韻を残す。ホバー：背景色が滑らかに変わり、矢印が上昇。
PORTICO — Back to Top
PORTICO。アーチ型 / 71 × 104。通常時：頂部の一本線が少し上昇して戻る。ホバー：背景が深まり、矢印が滑らかに持ち上がる。
NORTH BAR — Back to Top
NORTH BAR。ワイドタブ / 127 × 66。通常時：上端のアクセントが水平に移動。ホバー：文字と矢印の余白を詰めて背景を反転。
OPEN CORNERS — Back to Top
OPEN CORNERS。オープンフレーム / 88 × 88。通常時：4隅のうち対角の短線が順番に伸びる。ホバー：四隅が内側へ数px近づく。
UPLINE — Back to Top
UPLINE。縦長スリム / 62 × 119。通常時：細線内の明るい部分が上に移動。ホバー：左のラインが強まり、全体の色が反転。