w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Navigation

9 CSS Back-to-Top Buttons

W3TWEAKS by W3TWEAKS
October 11, 2021
in Navigation

You might also like

Free CSS Tab Bars

24 Free CSS Tab Bars

January 19, 2023
CSS Scroll Effects

24 Free CSS Scroll Effect Examples

November 23, 2022

In this article, we’re going to take a look at several CSS back-to-top buttons with examples. If you’re looking for a way to add a back-to-top button to your website, then this is the post for you. In this post, we’ll look at some of the best CSS back-to-top button collections with examples.

Author

  • Eric Porter
  • December 4, 2016

Link

Live Demo

Made with

  • HTML / SCSS

About the Code

Animated – ‘Back to Top’ arrows

More info: Link


Author

  • Chance Squires
  • June 16, 2020

Link

Live Demo

Made with

  • HTML / CSS

About the Code

CSS Back-to-top button

More info: Link


Author

  • Melissa Cabral
  • September 5, 2017

Link

Live Demo

Made with

  • HTML / CSS

About the Code

Simple pure CSS Arrow Button

More info: Link


Author

  • Jürgen Genser
  • March 23, 2013

Link

Live Demo

Made with

  • HTML / CSS

About the Code

Animated css back-to-top button

I used this form constructed with CSS3 as a separator between different sections of a one-pager and discovered that I could use a little hover effect to make it a back-to-top button.

More info: Link


Author

  • Shahroq
  • March 11, 2016

Link

Live Demo

Made with

  • HTML / SCSS

About the Code

Back to Top Button

More info: Link


Author

  • Eric Porter
  • September 1, 2016

Link

Live Demo

Made with

  • HTML / SCSS

About the Code

Back to Top Button – animated

More info: Link


Author

  • Rafaela Lucas
  • September 13, 2018

Link

Live Demo

Made with

  • HTML / SCSS

About the Code

Back to Top – CSS Hover Animation

More info: Link


Author

  • Dan Powell
  • August 8, 2016

Link

Live Demo

Made with

  • HTML / CSS

About the Code

Back to Top Button

Too often with buttons only normal and hover states are designed with thought. This button adds in the :active (or clicked) state that goes another step and shows the user where they are about to be taken.

More info: Link

Dependency: bootstrap.min.css


Author

  • Pekka Wallenius
  • June 13, 2016

Link

Live Demo

Made with

  • HTML / SCSS

About the Code

back-to-top button in footer

Just testing out some border action. Could be used for a back-to-top button in the footer or something.

More info: Link


Tags: back to topCSS
Previous Post

11 JavaScript Back to Top

Next Post

50+ Free CSS Checkbox Examples to Make Your Site More Interactive

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Free CSS Tab Bars

24 Free CSS Tab Bars

by W3TWEAKS
January 19, 2023

Collection of CSS tab bars that can be used to create stylish and responsive web interfaces. Tab bars are a...

CSS Scroll Effects

24 Free CSS Scroll Effect Examples

by W3TWEAKS
November 23, 2022

In this article, we have collected 24 examples of CSS scroll effects. CSS Scroll Effects are an easy way to...

JavaScript Back to Top

11 JavaScript Back to Top

by W3TWEAKS
October 10, 2021

This demo collection is a collection of javascript back to top demos and examples which aim to show how JavaScript...

CSS Back to top

7 CSS Back to top

by W3TWEAKS
September 30, 2021

Collection of CSS Back to top demos and with code snippet. The "Back to Top" feature is a common feature...

Next Post
Custom CSS Checkbox buttons

50+ Free CSS Checkbox Examples to Make Your Site More Interactive

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools