Create Better Divi Headers

11 Hover Effects for Divi Button Module

by | Jan 19, 2017 | 13 comments

In this post I’d like to share some CSS snippets for applying nice hover effects to Divi Button module. These are really simple to implement but cool effects, check out the demos and read the quick implementation guidline below.

Demo

Disable the button icon

Normally these effects should work fine with any button styling except for the case when the icon is set to be shown only on hover, it behaves weird so I’d prefer to disable the button icon completely like it is shown in the image below.

Adding the CSS class

Add the CSS class provided for each effect to Button Module Settings -> Custom CSS -> CSS Class field like it is indicated in the image below.

Applying the CSS

Copy the hover effects CSS snippets below and add them into Divi -> Theme Options -> General -> Custom CSS field.

CSS snippets for button hover effects

Copy the CSS snippets below and add them into Divi -> Theme Options -> General -> Custom CSS  field. Save everything and enjoy!

Grow Effect

CSS Class: grow
/*** Grow Effect ***/
.et_pb_button.grow {
    -webkit-transition: -webkit-transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.et_pb_button.grow:hover, 
.et_pb_button.grow:focus, 
.et_pb_button.grow:active {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}
/*** END Grow Effect ***/

Shrink Effect

CSS Class: shrink
/*** Shrink Effect ***/
.et_pb_button.shrink {
    -webkit-transition: -webkit-transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
}
.et_pb_button.shrink:hover, 
.et_pb_button.shrink:focus, 
.et_pb_button.shrink:active {
    -webkit-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}
/*** END Shrink Effect ***/

Rotate Right Effect

CSS Class: rotate-right
/*** Rotate Right Effect ***/
.et_pb_button.rotate-right{
    -webkit-transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.rotate-right:hover, 
.et_pb_button.rotate-right:focus, 
.et_pb_button.rotate-right:active {
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}
/*** END Rotate Right Effect ***/

Rotate Left Effect

CSS Class: rotate-left
/*** Rotate Left Effect ***/
.et_pb_button.rotate-left{
    -webkit-transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.rotate-left:hover, 
.et_pb_button.rotate-left:focus, 
.et_pb_button.rotate-left:active {
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
}
/*** END Rotate Left Effect ***/

Wobble Timed Effect

CSS Class: wobble-timed
/*** Wobble Timed Effect ***/
.et_pb_button.wobble-timed:hover, 
.et_pb_button.wobble-timed:focus, 
.et_pb_button.wobble-timed:active {
    -webkit-animation: wobble-timed 0.2s 3 linear;/* loops 3 times, but you are free to change it to whatever you like */
    animation: wobble-timed 0.2s 3 linear; 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

@keyframes wobble-timed {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

@-webkit-keyframes wobble-timed {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
    }
}
/*** END Wobble Timed Effect ***/

Wobble Infinite Effect

CSS Class: wobble-inf
/*** Wobble Infinite Effect ***/
.et_pb_button.wobble-inf:hover, 
.et_pb_button.wobble-inf:focus, 
.et_pb_button.wobble-inf:active {
    -webkit-animation: wobble-loop infinite 0.2s linear;
    animation: wobble-loop infinite 0.2s linear;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}

@keyframes wobble-loop {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

@-webkit-keyframes wobble-loop {
    50% {
        -webkit-transform: translateX(3px) rotate(2deg);
    }

    100% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
    }
}
/*** END Wobble Infinite Effect ***/

Float Up Effect

CSS Class: float-up
/*** Float Up Effect ***/
.et_pb_button.float-up {
    -webkit-transition: transform 0.25s;
    -o-transition: transform 0.25s;
    transition: transform 0.25s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.float-up:hover, 
.et_pb_button.float-up:focus, 
.et_pb_button.float-up:active {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}
/*** END Float Up Effect ***/

Float Down Effect

CSS Class: float-down
/*** Float Down Effect ***/
.et_pb_button.float-down {
    -webkit-transition: transform 0.25s;
    -o-transition: transform 0.25s;
    transition: transform 0.25s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.float-down:hover, 
.et_pb_button.float-down:focus, 
.et_pb_button.float-down:active {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
}
/*** END Float Down Effect ***/

Float Up Effect with Shadow

CSS Class: float-up-alt
/*** Float Up Effect with Shadow ***/
.et_pb_button.float-up-alt {
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.float-up-alt:hover, 
.et_pb_button.float-up-alt:focus, 
.et_pb_button.float-up-alt:active {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-box-shadow: 0px 4px 4px #606060;
    box-shadow: 0px 4px 4px #606060;
}
/*** END Float Up Effect with Shadow ***/

Float Down Effect with Shadow

CSS Class: float-down-alt
/*** Float Down Effect with Shadow ***/
.et_pb_button.float-down-alt {
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.float-down-alt:hover, 
.et_pb_button.float-down-alt:focus, 
.et_pb_button.float-down-alt:active {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    -webkit-box-shadow: 0px -4px 4px #606060;
    box-shadow: 0px -4px 4px #606060;
}
/*** END Float Down Effect with Shadow ***/

Spin Effect

CSS Class: spin
/*** Spin Effect ***/
.et_pb_button.spin{
    -webkit-transition: -webkit-transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.et_pb_button.spin:hover, 
.et_pb_button.spin:focus, 
.et_pb_button.spin:active{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/*** END Spin Effect ***/
Hope you’ll find these snippets useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! ;) Cheers!

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!