That little back to top button, popping up at the bottom right of every Divi website as soon as you start to scroll. It gets the job done, it’s unobtrusive, it doesn’t draw attention to itself. What if…it got a whole lot more exciting. It may not be appropriate for every project, but styling the Back To Top button is a great way to surprise and delight your website visitors.

I didn’t realise quite how much people love a styled Back To Top button, until I launched this site for Andrea Ellison. Scroll down a little and admire the cute little mackerel that pops out, swimming his way back to the top. I’ve had lots of requests for a tutorial and it’s simpler than it looks.

There are two steps to this.

1. Replace the standard arrow with an image.
2. Remove the button background

You can either watch the video and copy and paste the code below the video, just grab the code or do both. And if you are scared of inspecting code and writing custom CSS, this post is for you.

PS. The video also has some general tips on styling the Divi Back To Top button so dive in.

.et_pb_scroll_top::before {
    content: url(https://yourfile.png);
    padding: 10px;
}
.et_pb_scroll_top.et-pb-icon {
    background: none;
}

In the video, I show this site and in the demo I show this site. I would LOVE to see any fun and funky Back To Top Buttons that you create.

Melissa x

PS. Please share them in my friendly and frankly awesome Facebook group. JOIN HERE >.
We got your back.