9 CSS Back-to-Top Buttons

By | October 11, 2021

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

Made with

  • HTML / SCSS

About the Code

Animated – ‘Back to Top’ arrows

More info: Link


Author

  • Chance Squires
  • June 16, 2020

Link

Made with

  • HTML / CSS

About the Code

CSS Back-to-top button

More info: Link


Author

  • Melissa Cabral
  • September 5, 2017

Link

Made with

  • HTML / CSS

About the Code

Simple pure CSS Arrow Button

More info: Link


Author

  • Jürgen Genser
  • March 23, 2013

Link

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

Made with

  • HTML / SCSS

About the Code

Back to Top Button

More info: Link


Author

  • Eric Porter
  • September 1, 2016

Link

Made with

  • HTML / SCSS

About the Code

Back to Top Button – animated

More info: Link


Author

  • Rafaela Lucas
  • September 13, 2018

Link

Made with

  • HTML / SCSS

About the Code

Back to Top – CSS Hover Animation

More info: Link


Author

  • Dan Powell
  • August 8, 2016

Link

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

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


Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.