MARCH OFFER – 15% OFF Limited Time Left Only. USE MARCH15.

5 Modern Ways To Style Divi Back To Top Button – Easy!

Home 9 Design or Style 9 5 Modern Ways To Style Divi Back To Top Button – Easy!

5 Modern Ways To Style Divi Back To Top Button – Easy!

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

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.

Style 5

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

Enable Divi Back To Top

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.

Custom CSS

Bored😴?

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

Become A Member Today!

Divi Awesome Lifetime Access Pass

Latest Products

[et_pb_shop type=”latest” posts_number=”2″ columns_number=”1″ sale_badge_color=”#f16699″ icon_hover_color=”#ffffff” hover_overlay_color=”rgba(0,0,0,0.61)” hover_icon=”0||divi||400″ _builder_version=”4.17.4″ _module_preset=”default” title_font=”Work Sans|600|||||||” title_text_color=”#000000″ title_font_size=”16px” title_line_height=”1.2em” price_font=”Work Sans||||||||” price_text_color=”#000000″ price_font_size=”15px” sale_badge_font=”Red Hat Display||||||||” sale_price_text_color=”#1a1a1b” sale_price_font_size=”18px” rating_text_color=”#f16699″ border_radii_image=”on|7px|7px|7px|7px” global_colors_info=”{}”][/et_pb_shop]

Become A Member!

Gain Access To All Layouts, Child Themes & more. Use “WELCOME10” to get an additional 10% OFF today.

Related Articles

0 Comments

Pin It on Pinterest

Share This