Hi everyone!
I use the Debutify theme & I would like to change the design of my CTA, but my CSS is not working.
It keeps showing as the standard theme button. Does anyone know how I could make it look like the right design?
MY CSS:
/* - - - - - - - - - CTA Button Section - - - */
#pricing-container .price-card–cta {
padding: 0 20px 24px;
text-align: center;
}
#pricing-container .price-card–cta–button.btn{
min-width:20px;
display:block;
max-width:183px;
margin:0 auto;
}
Hey @SamiBaydani ,
Can you please share your store domain so we can provide the correct CSS to change the button?
Debutify does not use the classes “price-card–cta–button” and “price-card–cta”, therefore why the changes are not being applied.
Hey @SamiBaydani ,
The classes are correct. The pricing tabs you are using are not from Debuity, therefore they have different class names.
Please try adding !important to the end of each style, for example:
#pricing-container .price-card–cta {
padding: 0 20px 24px !important;
text-align: center !important;
}
#pricing-container .price-card–cta–button.btn{
min-width:20px !important;
display:block !important;
max-width:183px !important;
margin:0 auto !important;
}
You will need to add the following styles as well to change the rounded corners, colors and padding.
background-color: #f4f4f4;
border-color: #f4f4f4;
color: #000;
border: 1px solid #1d1d1d;
border-radius: 6px;
padding: 16px 24px;
Let me know if this worked.
@SamiBaydani However, the CSS you are using is already being implemented on the page.
@debutifysupport Thank you for your time! I’ve added the !important as shown in this image but the CTA buttons are still the same.
Hey @SamiBaydani ,
Please send a reference of how you want the button to look like as the codes you mentioned are already being implemented on the store.
This worked! Thank you so much!!
