Change background color of button

I’m trying to change the background color of a button on one of my pages. I used the button short code in the Promo element. This is the button short code…[button class=“purple-btn”
type=“flat” shape=“square” size=“small” href=""]Click for Bio[/button]. I also updated Custom CSS with .purple-btn {background-color: #673894 !important; }

How do I change the background color of this button?

Hello @eutaw,

Thanks for asking. :slight_smile:

The shortcode and CSS you have shared should work absolutely fine. However looking at the website I don’t see class="purple-btn" applied on Click for bio button. You can use following CSS to change the color:

.page-id-1236 a.x-btn.x-btn-flat.x-btn-square.x-btn-small {
    background-color: #664390;
    border-color: #664390;
}

Thanks.

Thank you. That works. However, I am trying to re-size section 4 on that page by adding the following CSS.

.page-id-1236 #x-section-4 .x-promo {
height: 270px;
font-size: 12px;
text-align: center;}

Any idea why this wouldn’t change the height of section 4?

Hi again,

Try replacing your code with the following code:

.page-id-1236 .e1236-32.x-section .x-promo {
    max-height: 270px;
    font-size: 12px;
    text-align: center;
}

Let us know how this goes!

Thank you. That works wonderfully. How would I have known to use .e1236-32.x-section? Is there a video that explains this?

Again, thanks.

Hi again,

Glad it worked, .e1236-32 is the class of the section you were trying to target (see screenshot)

You can use Chrome’s Developer tools to find out the target classes and ID’s, to learn more please see https://developer.chrome.com/devtools

Hope this helps!

Thank you. I added a section before what was Section 4 and Section 4 became Section 5. I changed the code above to be:

.page-id-1236 .e1236-41.x-section .x-promo {
height: 225px;
font-size: 12px;
text-align: center;
}

This looks the way I want it to look, but I want to be sure that changing to .e1236-41 will not affect anything else.

Thanks