different styles button in the same page - Forum | JoomShaper
Solved Templates

different styles button in the same page

Asked by leonardo gregis 4 months ago Last activity 4 months ago

hallo,
I'd like to add a button style with just the border. My problem is that one part of the page has a light background and another a dark background, so I need to invert the colors, but I can't. I've tried using the page's custom CSS, both on the add on and the template styles but I can't seem to fix it.
Thank you for your help

on light background:
.sppb-btn, body .btn{
background-color: rgba(0,0,0,0);
color: #1D5072;
border-color: #1D5072;
}
.sppb-btn:hover, body .btn:hover{
background-color: rgba(0,0,0,0);
color: #ca7c5c;
border-color: #ca7c5c;
}

on dark background
.sppb-btn, body .btn{
background-color: rgba(0,0,0,0);
color: #f3f0e7;
border-color: #f3f0e7;
}
.sppb-btn:hover, body .btn:hover{
background-color: rgba(0,0,0,0);
color: #ca7c5c;
border-color: #ca7c5c;
}

Accepted answer

Marked as the solution
Ziaul Kabir Staff
4 months ago

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,

Log in to reply.