Snippet / Theme Options > Custom CSS

Style the Divi Back-to-Top Button

Turns Divi's default back-to-top control into a cleaner fixed button with stronger contrast and mobile-safe positioning.

Enable Divi’s back-to-top button first, then apply this CSS.

.et_pb_scroll_top.et-pb-icon {
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #17212b;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 33, 43, 0.22);
  transition: background-color 160ms ease, transform 160ms ease;
}

.et_pb_scroll_top.et-pb-icon:hover,
.et_pb_scroll_top.et-pb-icon:focus-visible {
  background: #2563eb;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .et_pb_scroll_top.et-pb-icon {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
}

Notes

• Check overlap with chat widgets, cookie banners, and sticky mobile CTAs.
• Keep the button visible enough for long guides and product archives.

Sources

• https://www.peeayecreative.com/blog/
• https://www.peeayecreative.com/divi/
• https://wpzone.co/blog/snippet-category/general-divi-tips/