How To Customize the Back To Top Button in Divi

by | Sep 19, 2017 | Divi Tutorial | 17 comments

Welcome to part 5 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

In this Divi tutorial, I teach you “How to Customize the Back To Top Button in Divi.” Having a back to top button is crucial in modern web design. Particularly for mobile, it’s very important. You don’t want users to have to manually and painstakingly scroll back up to the top. With that in mind, one way to separate your Divi website from others out there is to customize the back to top button! It’s very to do with a little CSS magic.

This tutorial walks you though how I do it and will empower you to make some custom back to top buttons for your Divi sites. And this will look great for responsive design without you having to make ANY adjustments for mobile!

Here’s the CSS I used:


/*----------Custom Back To Top Button----------*/ 

.et_pb_scroll_top.et-visible {
    opacity: 1;
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
}

.et_pb_scroll_top.et-pb-icon {
    right: 15px;
    bottom: 15px;
    border-radius: 25px;
    background: rgba(25, 72, 103, 0.48);
    padding: 10px;
}


.et_pb_scroll_top.et-pb-icon:hover {
    background: #60c0ff;
}

.et_pb_scroll_top:before {
    content: "\21";
}