How To Change The Style Of Divi Back To Top Button

Back To Top Button

Let’s figure out how to change the style of divi back to top button.

What To Expect From This post:

1) The benefits of styling the back-to-top button.

2) Where to add your CSS.

3) The CSS code snippet that will make your mobile menu sticky.

Let’s Change The Look Of Our Back-To-Top Button

In this post, I am going to show you how to change the style of Divi back to top button, by adding a simple piece of CSS code to your website.

For other posts just like this, visit this page.

The default back-to-top button works, but it’s not the most awesome looking button in the world.

Styling it allows you to “tweak” the colours of the button so that it blends in nicely with the theme of your website.


Here's what the final product will look like

As you can see from the image, we have changed the whole look of the button. 

When a visitor hovers over the button now, it will change the background into a light blue, which works well with my website’s colour scheme.

You’ll be able to change the colours to fit in with your own website.

1) Navigate To “Custom CSS” 

In the sidebar menu on your WordPress dashboard, navigate to the Divi Custom CSS section.

Divi > Theme Options > Scroll down to the bottom and find the section that’s called “CUSTOM CSS”.

This is where we will paste our CSS code snippet.

This is what the section looks like.

2) Paste the following code

/*———-Custom Back To Top Button———-*/ {
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);
} {
right: 15px;
bottom: 100px;
border-radius: 25px;
background: rgba(25, 72, 103, 0.48);
padding: 10px;
} {
background: #60c0ff;

.et_pb_scroll_top:before {
content: “\21”;

Need A Website?

We specialize in designing highly professional websites for small to medium-sized businesses at an affordable cost.

Only pay us for the job once you are 100% satisfied with your new website.

We offer a lifetime after-sale support service for all of our customers.

3) Change The Colours

Feel free to tweak the code to better fit your own website’s theme. 

Play around with the colours a bit and find the best look for your site.

Look for these lines of code and use your own colours.


background: rgba(25, 72, 103, 0.48);

background: #60c0ff;

4) That’s It!

Once you have added the CSS code, you can click save.

Now you know how to change the style of divi back to top button, with a small piece of CSS code.

DIVI Tutorials

For more useful Divi tutorials just like this one, go check out our Blog page where you’ll find a whole bunch of awesome goodies, to help make your website friggen AWESOME!


Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.


  1. Jason

    Thanks for this! Very helpful

  2. Martin Hough

    Awesome thanku

  3. Lauren Cronje

    So simple! Thnx

    • ryan

      Hi Lauren, thanks for the feedback. Im glad it helped

  4. Paul

    Very easy to use thank you

    • ryan

      Hi Paul! Im glad it helped

  5. Brian

    Super dooper helpful thanks a mill!

    • ryan

      No problem Brain. Glad it helped!


Submit a Comment

Your email address will not be published. Required fields are marked *