Change color of back to top button


I changed the color of my footer to white so it blends with my blog, but not I can’t see the back to top button unless I hover over it. How can I change the outline color of the button? I tried some of the code I found here, but none of it did anything for me. It looks just like I want it to when I’m hovering, it’s just the non-hover color. I changed the color of the footer, and took a screen shot so you can see what I mean. The button disappears when the footer background is white.

Any help is greatly appreciated!


I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/change back to top button color/

.bg-dark .back-to-top,  {
    border-color: red;
.back-to-top .fa {
    color: red;

Best Regards,


Thanks so much for the response! I put in the code you suggested, and it half worked! The middle chevron arrow is the colour I’d like now, but the border of the box is still white.

I attached a screen shot of the button, and the code I put in.


Hello there,

Thank you for the update.

Could you please provide a link to your website so that I can inspect it?

Best Regards,

Hi there,

My URL is

Thanks for all the help! It’s very much appreciated!

Hello there,

Thanks for the link.

Please remove the “,” from the just before the bracket in the previous CSS code. It should be the following:

.bg-dark .back-to-top {
    border-color: #3750a5;

Best Regards,

Success! Thanks so much!