5 awesome ways Style Divi back to top button, very easy to install the code and edit it with your colors and style.

Welcome back to our #3 freebie. Today I am going to tell you how to style Divi back to top button in just 1 minute.

Copy the code and paste in your custom CSS and BOOM you are done.

Let’s Begin!

Style Divi Back To Top Button – Previews

Note: All the slides are in the same sequence as the code below, so please don’t get confused.

Step #1 – Enable Divi Back To Top Button From Theme Options

Step by step style Divi back to top button tutorial

Step #2 – Let’s Style Divi Back To Top Button

If you see below there are a total of 5 styles for Divi back to top button, you can adjust color, padding, margin, and border-radius according to your needs.

This is tested in Divi version 4.6.2

/* There are total 5 Styles in this code snippet - Don't copy paste all of them only copy which you want to use and hide or delete rest of them.*/

/*       STYLE #1        */

/* Blue Gradient Divi Back To Top Button By Duogeeks*/

.et_pb_scroll_top.et-pb-icon {
  background-image: linear-gradient(120deg, #509AFB, #4570DE); /* Color Code*/
  border-radius: 5px;
  padding: 12px;
  margin-right: 15px;
  margin-top:5px;
  transition: .5s ease;
}

.et_pb_scroll_top.et-pb-icon:hover {
  margin-top:-5px;
  transform:scale(1.1);
  transition: .5s ease;
}


/*       STYLE #2        */

/* Rounded With Shadow and Rotate Effect Divi Back To Top Button By Duogeeks*/

.et_pb_scroll_top.et-pb-icon {
    background-color:#68821D;
    border-radius: 50px;
    padding: 12px;
    margin-right: 15px;
    transition: .5s ease;
}

.et_pb_scroll_top.et-pb-icon:hover {
	transform:rotate(360deg);
	background-color:#593750;
	tansition: .5s ease;
	box-shadow: 0px 2px 42px 0px rgba(89,55,80,0.70);
}


/*       STYLE #3        */

/* Skew Effect On Hover Divi Back To Top Button By Duogeeks*/

.et_pb_scroll_top.et-pb-icon {
    background-color:orange;
    border-top-left-radius: 10px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:0px;
    padding: 12px;
    margin-right: 15px;
	transition: .5s ease;
}

.et_pb_scroll_top.et-pb-icon:hover {
	transform:skewx(-10deg);
	transition: .5s ease;
}


/*       STYLE #4        */

/* Curved Divi Back To Top Button By Duogeeks*/

.et_pb_scroll_top.et-pb-icon {
  background-color:#00C3AA;
  font-size:50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius:50px;
  padding: 10px;
  transition: .5s ease;
}

.et_pb_scroll_top.et-pb-icon:hover {
  transition: .5s ease;
}


/*       STYLE #5        */

/* Simple Black Divi Back To Top Button By Duogeeks*/

.et_pb_scroll_top.et-pb-icon {
  background-color:#000000;
  color: white;
  margin-right:20px;
  border-radius:2px;
  padding: 10px;
  transition: .5s ease;
}

.et_pb_scroll_top.et-pb-icon:hover {
  tansition: .5s ease;
  transform:translatey(-8px);
}

Step #3 – How & Where to Paste the Code?

For example, I like style #4 and I want it in my website what I will do it I will copy that much code and paste inside my Custom CSS.

Custom CSS navigation?

WordPress Dasboard > Divi > Theme Options – at very bottom you will see custom CSS option.

If you see in the image below, you will find I am already using style #4 in my custom CSS tab.

Bored😴?

Want some more boring designs? Join our newsletter, we push 1 boring freebie every Friday of the week.