Code Snippet

Season 1 - Episode 1

Divi Version: 2.4+
  • Difficulty

Buttons Shadow on Hover Effect

A little piece of code that will jazz up your Divi Themes Buttons.  Simply copy the below code into your Divi themes ‘Custom CSS’ area and click save.

/* Button Shadows 
--------------------------------------*/

.hm_sec1 .et_pb_button_5, .hm_sec1 .et_pb_button_5:hover {
    padding: 0.8% 3% !important;
}

.et_pb_button {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.et_pb_button:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.et_bloom .et_bloom_optin_1 .et_bloom_form_content button {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.et_bloom .et_bloom_optin_1 .et_bloom_form_content button:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    background-color: #1ba8a3 !important;
}