Yearly Access Membership 180+ Divi Products On Just $199.99 $179.99 / year Join Today !

Lifetime Access Membership 180+ Divi Products On Just $349.99 $314.99 Join Today !

DIVI Button Module With 5 Creative Hover Effects

May 21, 2019 | Button

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. 

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

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

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

DIVI Button Module With 5 Creative Hover Effects

Shop Our Divi Products

100+ Divi Child Themes , 95+ Divi Modules Bundle , 55+ Divi Freebies ,2+ New Products Every month , 6000+ Divi Module Design, Templates, Snippets, and Exclusive Divi Resources Gain Access To Everything We Offer !

[et_social_follow icon_style=”slide” icon_shape=”rounded” icons_location=”left” col_number=”auto” outer_color=”dark”]

Get 180+ Divi Products Access On Both Membership Plan

Yearly Access Membership $199.99 now Just $179.99

& Lifetime Access Membership $349.99$314.99

View Other Tutorials

Create TimeLine Using Divi Person Module

Create TimeLine Using Divi Person Module

In this post, we'll be showing you how you can easily create a simple creative timeline with Divi's your Person Modules with Css and without pluginTimeline DemoEnter your Content Here ...Enter your Content Here ...Enter your Content Here ...Enter your Content Here...

read more
10 Different Animate Text Effect Using Divi Slider Module

10 Different Animate Text Effect Using Divi Slider Module

We are going to show you how to CREATE Animated Text Effects USING Divi Modules without using a plugin! With this method, Change Slider To Check Each Animation Effects Animate Effect TEXTRotate Effect 1 Animate Effect TEXTRotate Effect 2Animate Effect TEXT Rotate...

read more
Cart
Your cart is empty.

Looks like you haven't made a choice yet.