How to Style Your Divi Theme Buttons with Hover Animations

Adding hover animations to your Divi theme buttons can elevate your website’s interactivity and visual appeal. In this tutorial, you’ll learn how to implement hover animations on your Divi buttons while retaining full control of their design in the Button Module editor.

Download Divi Button Animations JSON

Part 1: Styling the Button

We’ll use the Wave Button Animation as an example for this tutorial. This animation makes a vibrant wave of color slide over the button when hovered.

Part 2: Adding the CSS to Your Divi Theme

1. Navigate to your page settings.
2. Go to Page settings > Advance > Custom CSS.
3. Paste the above CSS code into the Custom CSS box and save your changes.

Copy CSS to clipboard

wave-button

wave-button

/* Wave Button Animation */
.wave-button {
position: relative;
overflow: hidden;
color: #ffffff; /* Initial text color */
z-index: 1;
transition: color 0.3s ease-in-out;
}

.wave-button::after {
content: "";
position: absolute;
top: 0;
left: -100%; /* Start off-screen to the left */
width: 100%;
height: 100%;
background-color: #e09900; /* Wave color */
transition: left 0.6s ease-in-out; /* Slower transition for the wave effect */
z-index: -1;
}

.wave-button:hover::after {
left: 0; /* Slide in from left to fill the button */
}

.wave-button:hover {
color: #ffffff; /* Ensure text color remains white on hover */
}

Part 3: Assign the CSS Class to Your Button

1. Open the button Settings on the page.
2. Edit the button and navigate to the Advanced > CSS Class field.
3. Add the class wave-button to the CSS Class field and save your changes.

wave-button

OTHER ANIMATIONS CSS AND CLASS

Wave Button with icon

wave-button1

/* Wave Button1 */
.wave-button1 {
position: relative;
overflow: hidden; /* Ensure animation stays within the button */
background-color: transparent; /* Transparent by default */
display: inline-flex; /* Align text and icon */
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
color: #ffffff; /* Button text color */
z-index: 1;
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for text and background */
}

/* Wave Animation */
.wave-button1::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -40px; /* Start animation off-screen */
width: 40px; /* Animate only part of the button */
background-color: #e09900; /* Wave color */
transition: all 0.6s ease-in-out; /* Smooth slide-in effect */
z-index: -1; /* Keep animation behind button content */
opacity: 0; /* Transparent until hover */
}

/* Hover Animation */
.wave-button1:hover {
background-color: #e09900; /* Set background color on hover */
color: #ffffff; /* Keep text white on hover */
}

.wave-button1:hover::after {
right: 0; /* Slide in animation on hover */
opacity: 1; /* Make wave visible */
}

/* Ensure Content Visibility */
.wave-button1 {
position: relative;
z-index: 1; /* Keep button content above animation */
}

_____________________________________

Wave Button Animation (Right to Left)

wave-button-rtl

.wave-button-rtl {
    position: relative;
    overflow: hidden;
    color: #ffffff; /* Initial text color */
    z-index: 1;
    transition: color 0.3s ease-in-out;
}

.wave-button-rtl::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%; /* Start off-screen to the right */
    width: 100%;
    height: 100%;
    background-color: #e09900; /* Wave color */
    transition: left 0.6s ease-in-out; /* Smooth transition for the wave effect */
    z-index: -1;
}

.wave-button-rtl:hover::after {
    left: 0; /* Slide in from right to fill the button */
}

.wave-button-rtl:hover {
    color: #ffffff; /* Ensure text color remains white on hover */
}

_____________________________________

Pulse (Expand)

pulse

/* Hover effect: Only apply scaling on hover */
.et_pb_button.pulse:hover {
transform: scale(1.1); /* Button scales up smoothly on hover */
}

/* Active state: Reset scaling */
.et_pb_button.pulse:active {
transform: scale(1); /* Reset to original size on click */
}

_____________________________________

Pulse (Contract)

pulse-contract

.et_pb_button.pulse-contract {
    position: relative;
    overflow: visible; /* Keep Divi's default styles intact */
    display: inline-block; /* Ensures proper button layout */
    transition: transform 0.4s ease-in-out; /* Smooth contraction effect */
}

.et_pb_button.pulse-contract:hover {
    transform: scale(0.9); /* Shrinks the button slightly on hover */
}

.et_pb_button.pulse-contract:active {
    transform: scale(1); /* Reset to original size on click */
}

_____________________________________

Diagonal (Bottom Top)

expand-diagonal

.expand-diagonal {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    z-index: 1;
    transition: color 0.3s ease-in-out;
}

.expand-diagonal::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%; /* Start from the center diagonally */
    width: 20%;
    height: 20%;
    background-color: #e09900;
    transition: width 0.6s ease-in-out, height 0.6s ease-in-out, top 0.6s ease-in-out, left 0.6s ease-in-out;
    z-index: -1;
}

.expand-diagonal:hover::after {
    width: 200%;
    height: 200%; /* Expand diagonally */
    top: 0;
    left: 0;
}

.expand-diagonal:hover {
    color: #ffffff;
}

_____________________________________

Diagonal (Top Bottom)

expand-vertical

.expand-vertical {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    z-index: 1;
    transition: color 0.3s ease-in-out;
}

.expand-vertical::after {
    content: "";
    position: absolute;
    top: -100%; /* Start off-screen at the top */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e09900;
    transition: top 0.6s ease-in-out;
    z-index: -1;
}

.expand-vertical:hover::after {
    top: 0; /* Slide in from top to bottom */
}

.expand-vertical:hover {
    color: #ffffff;
}

_____________________________________

Box Shadow (right)

box-shadow

.box-shadow {
position: relative;
overflow: hidden;
color: #ffffff;
background: #1a1a1a; /* Neutral base background */
border: 2px solid transparent;
box-shadow: 10px 10px 0px 0px rgba(224, 153, 0, 0); /* Initial state with no visible shadow */
transition: box-shadow 0.6s ease-in-out, color 0.3s ease-in-out;
}

.box-shadow:hover {
box-shadow: 10px 10px 0px 0px rgba(224, 153, 0, 0.8); /* Visible shadow on hover */
background: #e09900; /* Matches glow to the hover background */
color: #ffffff; /* Keeps text white */
}

_____________________________________

Box Shadow (left)

box-shadow-left-bottom

.box-shadow-left-bottom {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: #1a1a1a; /* Neutral base background */
    border: 2px solid transparent;
    box-shadow: 10px 10px 0px 0px rgba(224, 153, 0, 0); /* Initial state with no visible shadow */
    transition: box-shadow 0.6s ease-in-out, color 0.3s ease-in-out;
}

.box-shadow-left-bottom:hover {
    box-shadow: -10px 10px 0px 0px rgba(224, 153, 0, 0.8); /* Shadow shifts to left-bottom */
    background: #e09900; /* Matches glow to the hover background */
    color: #ffffff; /* Keeps text white */
}

_____________________________________

Diagonal Expand from Top-Left

expand-diagonal-top-left

.expand-diagonal-top-left {
    position: relative;
    overflow: hidden;
    color: #ffffff; /* Initial text color */
    z-index: 1;
    transition: color 0.6s ease-in-out;
}

.expand-diagonal-top-left::after {
    content: "";
    position: absolute;
    top: 0; /* Start at the top */
    left: 0; /* Start at the left */
    width: 20%; /* Initial size of the diagonal element */
    height: 20%;
    background-color: #e09900; /* Diagonal color */
    transition: width 1.7s ease-in-out, height 1.7s ease-in-out, top 1.7s ease-in-out, left 1.7s ease-in-out;
    z-index: -1;
}

.expand-diagonal-top-left:hover::after {
    width: 200%;
    height: 200%; /* Expand diagonally */
    top: -50%; /* Expands upwards to cover the top area */
    left: -50%; /* Expands leftwards to cover the left area */
}

.expand-diagonal-top-left:hover {
    color: #ffffff; /* Ensure text color remains white on hover */
}

_____________________________________

Neon Glow

neon-glow

.neon-glow {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: #1a1a1a; /* Neutral base background */
    border: 2px solid transparent;
    box-shadow: 0 0 0 rgba(224, 153, 0, 0);
    transition: box-shadow 0.6s ease-in-out, color 0.3s ease-in-out;
}

.neon-glow:hover {
    box-shadow: 0 0 15px rgba(224, 153, 0, 0.8), 0 0 30px rgba(224, 153, 0, 0.6);
    background: #e09900; /* Matches glow to the hover background */
    color: #ffffff; /* Keeps text white */
}

_____________________________________

Horizontal Expand from Center

expand-horizontal

.expand-horizontal {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    z-index: 1;
    transition: color 0.3s ease-in-out;
}

.expand-horizontal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%; /* Start from center horizontally */
    width: 0;
    height: 100%;
    background-color: #e09900;
    transition: width 0.6s ease-in-out, left 0.6s ease-in-out;
    z-index: -1;
}

.expand-horizontal:hover::after {
    width: 100%;
    left: 0; /* Expand to full width */
}

.expand-horizontal:hover {
    color: #ffffff;
}

_____________________________________

Important Note

The hover animations will work best if button icons are turned off in the Divi Button Module. If button icons are enabled, the hover animation may not display as intended.

<!– wp:social-links –><ul class=”wp-block-social-links”><!– wp:social-link {“url”:”https://gravatar.com/timgum”,”service”:”gravatar”,”rel”:”me”} /–></ul><!– /wp:social-links –>