How to Style Divi Buttons with Custom CSS

Why Default Divi Buttons Are Just a Starting Point

Divi ships with a perfectly functional button module, but the default styles are intentionally generic. They are designed to work across thousands of websites, which means they are not designed to stand out on yours. Mastering Divi button styles with custom CSS is one of the fastest ways to give a site a polished, professional identity that feels intentional rather than off-the-shelf.

The good news is that Divi outputs predictable, consistent CSS classes, which makes targeting buttons straightforward. Whether you are working in a Divi child theme, using the built-in Custom CSS panel, or editing your theme options, the selectors are the same.

Where to Add Your Custom CSS in Divi

Before writing a single line of code, you need to know where it goes. Divi offers several locations. The most reliable for site-wide changes is Divi → Theme Options → Custom CSS. This field loads on every page and is cached efficiently.

If you are using a Divi child theme — which is strongly recommended for any serious project — place your CSS inside the child theme's style.css file. This keeps your customizations safe through Elegant Themes updates and gives you version control over your design decisions.

For page-specific overrides, the module's built-in CSS panel (found under Advanced → Custom CSS inside any module) is the cleanest option. Avoid pasting button CSS into the WordPress Customizer's Additional CSS field if you are already using Theme Options, as this can create specificity conflicts.

The Core Divi Button CSS Selectors

Divi renders its buttons using the class .et_pb_button. Every button module on your site carries this class, making it your primary target. Here are the most useful selectors:

.et_pb_button { }               /* Default state */
.et_pb_button:hover { }          /* Hover state */
.et_pb_button::after { }         /* Arrow icon pseudo-element */
.et_pb_button:hover::after { }   /* Arrow on hover */

Divi also adds contextual classes based on the parent section or module, such as .et_pb_section_0 .et_pb_button, which lets you scope Divi button styles to specific areas without affecting the whole site.

Practical CSS Snippets for Common Button Styles

Here are four battle-tested patterns you can drop into any Divi project immediately.

Outlined Ghost Button:

.et_pb_button {
  background: transparent;
  border: 2px solid #7c9ef8;
  color: #7c9ef8;
  border-radius: 4px;
  padding: 14px 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
}
.et_pb_button:hover {
  background: #7c9ef8;
  color: #0f1117;
}

Pill-Shaped Button with Gradient:

.et_pb_button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 50px;
  color: #fff;
  padding: 16px 40px;
  font-weight: bold;
}
.et_pb_button:hover {
  background: linear-gradient(135deg, #764ba2, #667eea);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102,126,234,.4);
}

Hiding and Styling the Divi Button Arrow

One of the most common Divi button style requests is removing or customizing the arrow icon that appears on hover. By default, Divi uses a ::after pseudo-element to inject this arrow. To remove it entirely:

.et_pb_button::after {
  display: none !important;
}

To keep the arrow but change its appearance, you can use content to swap it for a different Unicode character, or adjust its font-size and margin-left to reposition it. Controlling this pseudo-element is a small detail that dramatically improves the refinement of your button designs.

Targeting Specific Buttons Without Affecting Others

When you want one button to look different from the rest — say, a primary CTA versus a secondary link — use Divi's built-in CSS Class field. Add a custom class like btn-primary in the module's Advanced tab, then target it precisely:

.btn-primary.et_pb_button {
  background: #e74c3c;
  color: #fff;
  border: none;
  font-size: 16px;
  padding: 18px 44px;
  border-radius: 6px;
}
.btn-primary.et_pb_button:hover {
  background: #c0392b;
}

This approach keeps your global Divi button styles intact while giving you precise control over individual instances. It scales cleanly across WordPress layouts with multiple button types on the same page.

Testing and Specificity Tips

Divi's inline styles sometimes override your custom CSS. If a rule is not applying, open browser DevTools and inspect the button element. Look for crossed-out properties — these indicate a specificity conflict. The fix is usually to add the parent module class to your selector, or in rare cases, to use !important sparingly.

Always test Divi button styles on mobile. Divi's responsive breakpoints can alter padding and font size in ways that make a desktop-perfect button feel cramped on a phone screen. Use Divi's built-in responsive controls alongside your CSS for the most predictable results.