Looking to upgrade the buttons on your DIVI website with a fresh, modern look? This CSS snippet will introduce a new style for your buttons, featuring a color transition and shadow effect on hover. Enhance the user experience by adding this simple yet impactful customization to your buttons.

.et_pb_button {

    background-color: #007bff;

    color: #ffffff;

    border: none;

    border-radius: 4px; /* Rounded edges */

    padding: 10px 20px;

    transition: all 0.3s ease-in-out;


.et_pb_button:hover {

    background-color: #0056b3;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    transform: translateY(-2px);


Breaking Down the Code:

.et_pb_button: Targets all buttons within the DIVI theme, setting a consistent background color, text color, and padding. Rounded edges and border removal are also defined here for a modern appearance.

.et_pb_button:hover: Defines the hover state of the buttons, changing the background color to a darker shade for depth, adding a shadow for emphasis, and slightly lifting the button with a transform effect to indicate interactivity.

Implementation Steps:

Accessing the DIVI Theme Options: Go to your WordPress dashboard, find "Divi," and click on "Theme Options."

Accessing the Custom CSS Box: Navigate to the "General" tab and look for the "Custom CSS" box.

Adding the Code: Insert the CSS snippet into the "Custom CSS" box.

Save Changes: Make sure to click "Save Changes" to apply your stylish new button designs.

With this customization, your DIVI website's buttons will now feature a modern design with engaging hover effects. This simple CSS tweak can significantly enhance the visual appeal and user experience of your site's buttons.

Experiment with different colors and effects in this snippet to match the unique style and branding of your website.