Add a Shiny Hover Effect to Divi Button

by | Apr 20, 2017 | 4 comments

In this tutorial I’ll show you how to implement a cool shiny hover effect to Divi button module. Hover over the demo button below to see this effect in action.

Demo:

To achieve this effect you’ll need to apply the following advanced design settings and use the CSS code provided below. And also please notice that this effect works best on dark background.

Step 1:

Apply button module advanced design settings

Step 2:

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

Step 3:

Copy the shiny hover effect CSS code snippet below and add it into the Divi -> Theme Options -> General -> Custom CSS field.

CCS code snippet for “shiny” hover effect

"Shiny" hover effect CSS snippet

/* Start shiny hover effect*/
.et_pb_button.shiny_button {
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.et_pb_button.shiny_button:hover {
  box-shadow: 0 0 30px 5px rgba(0, 199, 236, 0.5); /* set your color here 
       (it should be the same as the button bg color on hover but with 0.5 opacity)
       and play with 30px and 5px values to adjust box-shadow */
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et_pb_button.shiny_button:hover:before {
  -webkit-animation: shine 0.5s 0s linear;
  -moz-animation: shine 0.5s 0s linear;
  animation: shine 0.5s 0s linear;
}
.et_pb_button.shiny_button:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
.et_pb_button.shiny_button:before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #ffffff;
  box-shadow: 0 0 60px 20px #ffffff; /*play with 60px and 20px values to adjust box-shadow*/
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.et_pb_button.shiny_button:after {
   line-height: inherit !important;
}

@-webkit-keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
@-moz-keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
@keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}

/* End shiny hover effect*/

Hope you’ll find this effect useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! 😉

Pin It on Pinterest

Shares
Share This