DIVI Button Module With 5 Creative Hover Effects

DCT Team — Tue, 21 May 2019 07:09:40 +0000

In this tutorial,We are going to show you some unique button hover effects that just may surprise you.Today I’m sharing a step by step tutorial for 5 custom Divi buttons with a nice hover effect to Divi Button module to anywhere on your website.

Style 1

Click Here

Style 2

Click Here

Style 3

Click Here

Style 4

Click Here

Style 5

Click Here

Download Json File

View Full Demo

Steps for HOVER Effect with DIVI Button Module

Step 1. Download BUTTON_HOVER_EFFECTS.zip File

Step 2. Unzip Zip Folder

Step 3. Import Divi_Button_Module_With_5_Creative_Hover_Effects.json file on on Divi -> Divi Library -> Import & Export Button

Step 4. After import layout json files you can see in below

Step 5 : Create New Page > Click on “+” Icon see below image

Step 6. After click ,layout will be load then Publish Page

Step 7. Here two way possibility of use tilt .

1. Using Child theme
On unzip folder you can found Child Theme folder “BUTTON_HOVER_EFFECTS.zip” file so just upload and activate.

If child theme already exist then follow below step
-> Copy enqueue script function “DCT_BUTTON_HOVER_EFFECTS” code and paste on your existing child theme functions.php file.
-> Copy style.css code and paste on your existing child theme style.css file.

DCT_BUTTON_HOVER_EFFECTS In Function.php

function DCT_BUTTON_HOVER_EFFECTS() { 
wp_enqueue_style( 'button-hover-effect', get_stylesheet_directory_uri() . '/DCT_BUTTON_HOVER_EFFECTS.css' ); 
	
}
/* Add Front-Site Css 
-------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'DCT_BUTTON_HOVER_EFFECTS' );

2. Without Child theme
-> Upload “DCT_BUTTON_HOVER_EFFECTS.CSS” file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.

See image

1. DIVI Button module hover STYLE 1



.dct_btn_v1{


z-index: 2;
background: #000000;
border:none;
border-radius:0;
color: #fff;
text-transform: uppercase;
text-align: center;
padding: 7px 30.5px;
position: relative;
outline: none;
font-weight: 600;
font-size: 15px;
transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}

.dct_btn_v1:hover{color: #fff;padding: 7px 30.5px !important;border:none !important;}

.dct_btn_v1.dark{background-color:#fff !important;color: #111 !important;}
.dct_btn_v1.dark:hover{color: #fff !important;}

.dct_btn_v1.et_hover_enabled:hover::after{transition: all 0.4s ease-out !important;z-index: -1;}



.dct_btn_v1::after{content: "";
width: 4px;
height: 100%;
position: absolute;
right: 0;
top: 0;
opacity:1;
z-index:-1;
background: #ffc300;
transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}

.dct_btn_v1:hover::after{width: 100%;transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}


.dct_btn_v1.pink::after{background: #eb3b5a;}

.dct_btn_v1.green::after{background: #20bf6b;}
  
  
  .dct_btn_v1.blue::after{background: #1b67a9;}

2. DIVI Button module hover STYLE 2

.dct_btn_v2.et_hover_enabled:hover::after{transition: all 0.4s ease-out !important;z-index: -1;}

.dct_btn_v2{
letter-spacing: 1px;
color: #fff !important;
text-transform: uppercase !important;
  padding: 7px 30.5px;
background-color: #000;display: inline-block;box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);overflow: 
  hidden;
  font-size: 15px;

font-weight: 600;
  backface-visibility: hidden;
  transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;
  
  }


.dct_btn_v2:hover{border: 2px solid transparent;padding: .3em 1em !important;padding: 7px 30.5px !important;}

.dct_btn_v2:after{line-height: 1.7em;
font-size: 1em !important;
content: attr(data-icon);
left: -100% !important;
top: 0%;
margin-left: 0em !important;
position: absolute;
height: 100%;
width: 100%;
background-color: #ffc300;
text-align: center;
  transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;
  
  }


.dct_btn_v2:hover:after{line-height: 3em !important;top: 0;left: 0 !important;transition: all 0.4s ease-out !important;
-moz-transition: all 0.4s ease-out !important;
-webkit-transition: all 0.4s ease-out !important;
-ms-transition: all 0.4s ease-out !important;
-o-transition: all 0.4s ease-out !important;}




.dct_btn_v2.up::after{background-color: #eb3b5a;left: 0 !important;top: -100%;	}
.dct_btn_v2.up:hover::after{top: 0;}

.dct_btn_v2.down::after{background-color: #20bf6b;left: 0 !important;bottom: -100%;top: auto;}
.dct_btn_v2.down:hover::after{bottom: 0% !important;}


.dct_btn_v2.right::after{background-color: #1b67a9;right: -100% !important;top: 0%;left: auto !important;}
.dct_btn_v2.right:hover::after{top: 0;right: 0 !important;}

3. DIVI Button module hover STYLE 3


.dct_btn_v3{background: linear-gradient(135deg,#8300e9 0%,#0c71c3 100%);
color: #fff;
font-weight: 600;
font-size: 16px;
border: 0;
border-radius: 0px;
padding: 7px 30.5px;
text-transform: uppercase;
overflow: hidden;}

.dct_btn_v3:hover{color: transparent;
background: linear-gradient(135deg,#8300e9 20%,#0c71c3 100%);
padding: 7px 30.5px !important;border: none !important;}


.dct_btn_v3:hover:before{width: 140%;}
.dct_btn_v3:hover:after{position: absolute;
opacity: 1;
left: 0%;
width: 100%;
margin: 0;
text-align: center;
bottom: .5em;}



.dct_btn_v3:before{content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
left: -20%;
width: 20%;
text-align: center;
background: #fff;
opacity: 0.1;
transform: skew(-10deg);
transition: .8s ease all;}

.dct_btn_v3:after{position: absolute;
color: #fff;
opacity: 1;
left: 0% !important;
width: 100%;
text-align: center;
margin: 0 !important;
bottom: -30px;}


.dct_btn_v3.green,.dct_btn_v3.green:hover{background: linear-gradient(135deg,#478212 0%,#74cc27 100%);}

.dct_btn_v3.red,.dct_btn_v3.red:hover{background: linear-gradient(135deg,#e02022 0%,#f35656 100%);}

.dct_btn_v3.blue,.dct_btn_v3.blue:hover{background: linear-gradient(135deg,#0149CC 0%,#00C6FF 100%);}

4. DIVI Button module hover STYLE 4


.dct_btn_v4{
    
    color: #ffc300;
    
   font-size: 16px;
    letter-spacing: 1px;
   text-transform: uppercase; padding: 12px 20px 7px;
    border-radius: 0;
    border: 1px solid #ffc300;
    box-shadow: inset 3px 4px 0 #ffc300, 4px 4px 0 #ffc300;
    transition: all 0.5s cubic-bezier(0.1, 0.7, 0.3, -0.1) !important;
}
.dct_btn_v4:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #ffc300, 0 0 0 #ffc300;
  padding: 12px 20px 7px !important;
}
.dct_btn_v4.blue{
    color: #3498db;
    border-color: #3498db;
    box-shadow: inset 3px 4px 0 #3498db, 4px 4px 0 #3498db;
}
.dct_btn_v4.blue:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #3498db, 0 0 0 #3498db;
}

.dct_btn_v4.green{
    color: #20bf6b;
    border-color: #20bf6b;
    box-shadow: inset 3px 4px 0 #20bf6b, 4px 4px 0 #20bf6b;
}
.dct_btn_v4.green:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #20bf6b, 0 0 0 #20bf6b;
}


.dct_btn_v4.pink{
    color: #eb3b5a;
    border-color: #eb3b5a;
    box-shadow: inset 3px 4px 0 #eb3b5a, 4px 4px 0 #eb3b5a;
}
.dct_btn_v4.pink:hover{
    color: #fff;
    box-shadow: inset 160px 50px 0 #eb3b5a, 0 0 0 #eb3b5a;
}
@media only screen and (max-width: 767px){
    .dct_btn_v4{ margin-bottom: 20px; }
}

5. DIVI Button module hover STYLE 5


.dct_btn_v5{
    text-transform: uppercase;
    
    color: #ffc300;
    border-radius: 0;
	padding: 7px 30.5px;
  font-size: 16px;
    position: relative;
  font-weight: 600;
	border:none;
}
.dct_btn_v5:hover{ color: #ffc300;padding: 7px 30.5px !important;background-color:transparent !important;border: none !important; }
  
  
  
  
.dct_btn_v5:after{
    content: "";
    width: 100%;
    height: 100%;
	opacity:1;
    border: 2px solid #ffc300;
    position: absolute;
    bottom: 0;
    left: 0;
	font-size:0;	
	margin-left: 0;
    transition: width 0.2s ease 0s, height 0.2s ease 0.1s, border-top-width 0.1s ease 0.2s, margin 0.2s ease 0s !important;
}
.dct_btn_v5:hover:after{
    width: 60%;
    height: 0;
    border-width: 0 2px 2px;
    margin: 0 20%;
    transition: width 0.2s ease 0.2s, height 0.2s ease 0.1s, border-top-width 0.1s ease 0s, margin 0.2s ease 0.2s !important;
}






.dct_btn_v5.blue,
.dct_btn_v5.blue:hover{ color: #22ace3; }
.dct_btn_v5.blue:after{ border-color: #22ace3; }
  
  
  
  
  
.dct_btn_v5.pink,
.dct_btn_v5.pink:hover{ color: #eb3b5a; }
.dct_btn_v5.pink:after{ border-color: #eb3b5a; }
  
  
  
  
  
  
.dct_btn_v5.green,
.dct_btn_v5.green:hover{ color: #47cf77; }
.dct_btn_v5.green:after{ border-color: #47cf77; }
@media only screen and (max-width: 767px){
    .dct_btn_v5{ margin-bottom: 20px; }
}

-> Copy style code from DCT_BUTTON_HOVER_EFFECTS.css file and paste on Divi -> Theme Options -> General -> Custom CSS .

See Image

For Simple Effect use class “dct_btn_v1” on bUTTON module .
See Images :

The post DIVI Button Module With 5 Creative Hover Effects appeared first on Divi-Childthemes.com.

Button | Divi-Childthemes.com

DIVI Button Module With 5 Creative Hover Effects

Steps for HOVER Effect with DIVI Button Module

DCT_BUTTON_HOVER_EFFECTS In Function.php

1. DIVI Button module hover STYLE 1

2. DIVI Button module hover STYLE 2

3. DIVI Button module hover STYLE 3

4. DIVI Button module hover STYLE 4

5. DIVI Button module hover STYLE 5