11 Hover Effects for Divi Button Module

by | Jan 19, 2017 | 11 comments

In this post I’d like to share some CSS code snippets for applying nice hover effects to Divi Button module. I used these effects in some of my projects and I thought you’d like to use them too. They are really simple code snippets but the effects are cool and the implementation is straight forward as explained below.

Demo:

Step 1:

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.

Step 2:

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.

Step 3:

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

CCS code snippets for button hover effects

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

#1 - Grow effect (use "grow" CSS class)

 
/* Grow effect */
.grow {
 transition: transform 0.4s;
 -webkit-transition: -webkit-transform 0.4s;
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
 transform: scale(1.15);
 -webkit-transform: scale(1.15);
}

#2 - Shrink effect (use "shrink" CSS class)

 
/* Shrink effect */
.shrink {
    transition: transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
}
.shrink:hover, .shrink:focus, .shrink:active {
    transform: scale(0.85);
    -webkit-transform: scale(0.85); 
}

#3 - Rotate Right effect (use "rotate-right" CSS class)

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

#4 - Rotate Left effect (use "rotate-left" CSS class)

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

#5 - Wobble Timed effect (use "wobble-timed" CSS class)

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

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

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

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

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

#6 - Wobble Infinite effect (use "wobble-inf" CSS class)

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

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

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

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

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

#7 - Float Up effect (use "float-up" CSS class)

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

#8 - Float Down effect (use "float-down" CSS class)

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

#9 - Float Up effect with shadow (use "float-up-alt" CSS class)

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

#10 - Float Down effect with shadow (use "float-down-alt" CSS class)

 
/* Float Down effect (adds shadow) */
.float-down-alt {
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.float-down-alt:hover, .float-down-alt:focus, .float-down-alt:active {
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
    box-shadow: 0px -4px 4px  #606060;
}

#11 - Spin effect (use "spin" CSS class)

 
/* Spin effect */
.spin{
    transition: transform 0.4s;
    -webkit-transition: transform 0.4s;  
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* Firefox fix for pixelated edges during transform effects*/
}
.spin:hover, .spin:focus, .spin:active{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

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!

Pin It on Pinterest

Shares