How To Customize the Back To Top Button in 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!
/*----------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";
}
Similar Tutorials:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Thanks Josh,
Once again, a really useful guide on how to tweak CSS on a WordPress site. You also get a neat change to the back-to-the-top Divi button! Even though the changes suggested in these tutorials can be considered as “minor”, I like the differences they make to the overall look of my latest site.
Thanks, Eddie! Yeah I find that it’s the little things that make a big difference when customizing a Divi site. But more importantly, I’ve found that once you know how to tweak one element, you can use the same method to tweak another and another and another 🙂
NIce, but more elegant with a transition on the object, like this :
.et_pb_scroll_top.et-pb-icon {
transition: all 0.4s ease-in-out;
}
That works too! Yeah I’ve found that there are numerous ways to work with CSS objects typically. Good stuff, Aymeric.
Josh, I was looking for a way to put some finishing touches before moving a new site to production. I strive to make each site different than the last and I thought the back-to-top button needed to be different. A quick Google search and bingo! Thanks so much.
Awesome, Tom! Yeah I feel like the back to top button is the most overlooked element in Divi. Yet it’s so easy to customize. Great to hear that the tutorial helped you out. And that’s it’s picking up some traction on Google 🙂
Just wanted to thank you for your videos. I’m relatively new to the Divi platform (and web development in general), and your videos have shown me more in the past week, then any other video(s) i’ve watched, in recent past.
Thank you!
Thanks so much for that awesome feedback, Chris! Awesome to hear, man. Stick with it, keep going day by day and you’ll be amazed at how much you can do with Divi, WordPress and CSS! Those are my 3 biggies. I’ll work at keeping more videos coming!
Great tutorial, thanks! Just an idea – maybe you could write an article about Divi Blog module styling. 😉
Thanks, Zoran! I have that on my tutorial list!
Implemented the back to top button. Great tutorial video, and code write-up!
Get your point of having a :hover state for the button to accentuate that it is a button. Agree with you. Works fine in Desktop & laptop.
Yet on the mobile, the button automatically gets the :hover color (since no hover on mobile!) so the button stand’s out too much. Something that is not ideal.
Any idea how to approach this?
For now am not using the :hover state.
Hey Jo, for mobile, you could just overwrite the :hover code with the same color as the down state that way it doesn’t change. Or use a different media query so that the effect only applies for tablet and desktop!
Thank you! I implemented a custom back to top button.
It works fantastic! Great tutorial video.
I did and love the animation “fadeInBottom”!
One question, though:
What is the code to customize the fade-out of the button (when the website is back on top)?
For example, the user is on the bottom of the website, he/she clicks on it and goes straight to the top – which works perfect.
When the user reaches the top, the back-to-top-button fades out – unfortunately, it fades out to the right side. I’d love to adjust the fade-out as well (same direction of fade-in, that means fade-out to the bottom) – I can’t find the code/class for it, sorry.
Would you please tell me the class (code) for a custom fade out?
Ah good question, Ricardo. You can make it fade out top, right, bottom or left with this code:
.et_pb_scroll_top.et-hidden { opacity: 0; -webkit-animation: fadeOutRight 1s 1 cubic-bezier(.77,0,.175,1); -moz-animation: fadeOutRight 1s 1 cubic-bezier(.77,0,.175,1); -o-animation: fadeOutRight 1s 1 cubic-bezier(.77,0,.175,1); animation: fadeOutRight 1s 1 cubic-bezier(.77,0,.175,1); }Just replace fadeOutRight with fadeOutLeft, fadeOutTop or fadeOutBottom
Brilliant! It works perfect!
Thank you so much, you are the best!
Hi Josh,
Thank you so much for your tutorials. I found your channels and I have to say you have taught me so much and I am less scared now of coding. About this one, in particular, I would like to customise how soon does the button appear. Especially in mobile, it is important for me that it appears sooner. Would you by any chance know id there is a code for this?
Awesome to hear! Yeah I show how to do this in my CSS Course but in short, you can change the speed of when the button appears with the animation code. It’s below, I changed it to “10s” for example.
.et_pb_scroll_top.et-visible { opacity: 1; -webkit-animation: fadeInRight 10s cubic-bezier(.77,0,.175,1) 1; animation: fadeInRight 10s cubic-bezier(.77,0,.175,1) 1; }