Hello Leonardo,

Thanks for reaching out to us.

The issue is that both of your CSS rules target the same selectors (.sppb-btn and body .btn), so the last rule loaded will override the first one. To use different button colors on the same page, you’ll need to apply a custom class to the section, row, or addon that contains the buttons and then target the buttons inside that class.

For example:

/* Buttons on light background */
.light-section .sppb-btn,
.light-section .btn {
    background: transparent;
    color: #1D5072;
    border-color: #1D5072;
}
.light-section .sppb-btn:hover,
.light-section .btn:hover {
    color: #ca7c5c;
    border-color: #ca7c5c;
}
/* Buttons on dark background */
.dark-section .sppb-btn,
.dark-section .btn {
    background: transparent;
    color: #f3f0e7;
    border-color: #f3f0e7;
}
.dark-section .sppb-btn:hover,
.dark-section .btn:hover {
    color: #ca7c5c;
    border-color: #ca7c5c;
}

Then add light-section or dark-section in the CSS Class field of the corresponding SP Page Builder row/section.

Alternatively, you can create a second button style by assigning a custom button class (for example btn-light-outline and btn-dark-outline) directly to the button addon and style each class separately.

This approach works fine with SP Page Builder on the same page.

Best Regards,