/* -- START Scroll to Top icon background color-- */
.et_pb_scroll_top {
background-color: #696298 !important;
border: 1px solid #cdbad6 !important;
color: #cdbad6 !important;
}
/* -- START Scroll to Top icon background color-- */
Code language: CSS (css)
More options
Source: https://www.b3multimedia.ie/how-to-customize-the-back-to-top-button-in-divi/
Cirle with hover
/* Default button appearance */
.et_pb_scroll_top.et-pb-icon {
right: 30px; /* space from right */
bottom: 30px; /* space from bottom */
padding: 8px; /*padding size*/
border-radius: 30px; /* make the circle */
background: rgb(0, 101, 253) /* button color */;
font-size: 32px; /* icon size */
transition: all .1s ease-in-out; /* add transition */
}
/* Button Appearance on Mouseover */
.et_pb_scroll_top.et-pb-icon:hover {
bottom: 32px /* space from bottom */;
background: rgb(7, 69, 160) /*button hover color*/;
transition: all .1s ease-in-out; /*add transition*/
box-shadow: 0 10px 15px #162c4e4a; /*box shadow on hover*/
}
/* Animation tweaks */
.et_pb_scroll_top.et-visible {
-webkit-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
-moz-animation: fadeInBottom 2s 1 cubic-bezier(.50,0,.160,1);
-o-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
}
.et_pb_scroll_top.et-hidden {
opacity: 0;
-webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
Code language: CSS (css)
Centered GIF Image
.et_pb_scroll_top:before {
content: url(https://your-image-url-here.gif);/*Your image URL*/
}
.et_pb_scroll_top.et-pb-icon {
background: none;
right:48%;
bottom: -7px;
}
/* Animation from Bottom */
.et_pb_scroll_top.et-visible {
-webkit-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
-moz-animation: fadeInBottom 2s 1 cubic-bezier(.50,0,.160,1);
-o-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
}
.et_pb_scroll_top.et-hidden {
opacity: 0;
-webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
Code language: CSS (css)