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———-*/
.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: 100px;
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”;
}
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!
Newsletter
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.
Thanks for this! Very helpful
Awesome thanku
So simple! Thnx
Hi Lauren, thanks for the feedback. Im glad it helped
Very easy to use thank you
Hi Paul! Im glad it helped
Super dooper helpful thanks a mill!
No problem Brain. Glad it helped!