CSS ページトップへ戻るボタン デザインテンプレート

クリックするとページ上部へ戻るボタンのCSSサンプルを紹介します。

企業サイト向け

企業サイトで使えそうな真面目系の矢印を使用。

See the Pen
PagetopButton
by kura (@kuranopen)
on CodePen.

  • CSSのみ
  • レスポンシブ対応

ブログ向け

円の形をしたブログ向けのボタン。

See the Pen
VwmxRZZ
by kura (@kuranopen)
on CodePen.

  • fontawesomeを使用
  • レスポンシブ対応

外部ファイル


<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。