Quick Snack: Styling the Back to Top Button

by | Jan 10, 2016 | CSS Tips & Tricks

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Here is the first of the Divi Soup Quick Snacks –  Styling the back to top button and including an image. You can see this in action right here on divisoup.com, just scroll down far enough to activate the back to top button to see the custom styling.

So let’s get cooking!

ingredients

The Divi Theme from Elegant Themes
A suitable PNG image 30px by 30px

cooking-time

This should take you around 5 minutes max.

preparation

The first thing we need to do is create a transparent PNG file containing the image we want to use in our back to top button. I am using part of the Divi Soup logo as you can see here.

backtotop

Once you have that ready, upload it to your media library within WordPress and make a note of the path.

 

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*Back to top button styling*/

/*This section adds the image*/
.et_pb_scroll_top:before { 
    content: url(YOUR IMAGE URL HERE) !important;  
}

/*This section changes the shape to a circle and moves the button in from the edge of the screen*/
.et_pb_scroll_top.et-pb-icon {
    padding: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    right: 20px;
}

If you would like to retain the default icon and just style the shape then use this CSS instead.

/*Back to top button styling*/

.et_pb_scroll_top:before {
    content: "2";
}

/*This section changes the shape to a circle and moves the button in from the edge of the screen*/
.et_pb_scroll_top.et-pb-icon {
    padding: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    right: 20px;
}

 

And that’s it, now your back to top button should look like the one on this site, only with your own image.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!