How to style the back to top button on Divi theme?

If you don’t know how to style the back to top button or want a quick shortcut to copy and paste inside the theme custom CSS – this post is for you.

I already “know” how to do this, but I always keep going back to some other projects to copy and paste the code on my new project. And I always forget the class “.et_pb_scroll_top.et-pb-icon.et-visible, .et_pb_scroll_top.et-hidden”…

Come on, it is a big name to remember instead of just copying and pasting.

¯\_(ツ)_/¯

Hope to help you somehow!

Lets start!

Paste the following code in Divi > Theme Options > Custom CSS.

.et_pb_scroll_top.et-pb-icon.et-visible, .et_pb_scroll_top.et-hidden {
  background: #FFC801; /* Change background color here */
  color: #222222; /* Change arrow color here */
  border: 2px solid #D1A401; /* Change border width, style and color here */
}

After adding the code above to your custom CSS the button on the right side of the screen should be like this:

“See the back to top button on this page right bottom side”

I like to change only the main colours to match the ones of my project.

So, I always add some borders and change the background/arrow color.

But, feel free to try all the CSS tricks you have learn along the way.

I like to add darker colours to borders so there is a “3D” effect with colours only.

Hope to have helped you! It is not a big design change to just change the back to top style, but for sure your it is good to match all the component colours of your site.

Do you have some other tips for styling the back to top button on the Divi theme? Add your link or comment bellow and lets find new designs for this.

Style the back to top button on Extra theme

Paste the following code in Extra > Theme Options > Custom CSS.

#back_to_top.visible {
    background: #FFC801; /* Change background color */
    color: #222222; /* Change arrow color */
    padding: 10px; /* Change box size */
    border: 2px solid #D1A401; /* Add border width, style and color */
}

It show look exactly the same as the back to top button in this page.

Conclusion

So, this is my quick tip of the day. Did you like it?

Leave a comment!

See ya!