My button Does not have a background colour. Theme Be Yours

[AdamR1983]

Hi!

I am trying to add call-to-action buttons and when I do they have no background colour.

Can anyone spot the error or issue?

Custom CSV is

.button-container {
text-align: center; /* Centers the buttons horizontally */
margin-top: 20px; /* Optional: Adds some space above the buttons */
}

.btn {
padding: 10px 20px;
background-color: #f51d97; /* Pink background */
color: #fff; /* White text */
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin: 10px 0; /* Adds some vertical space between buttons */
}

In Custom Liquid:
<div class="button-container">
<a class="btn" href="REMOVED">Click to email</a>
<a class="btn" href="REMOVED">Click to Call</a>
<a class="btn" href="REMOVED">Click to WhatsApp</a>
<a class="btn" href="REMOVED">Click to Send a Message</a>
</div>

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @AdamR1983 
- Please follow these steps:

 

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

<style>
.btn {
background-color: #f51d97 !important;
}
</style>

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[AdamR1983]

This is super helpful!
Now the background is pink but the text is not centered and black. Any idea?

[BSS-TekLabs]

<style>
.btn {
background-color: #f51d97 !important;
    text-align: center !important;
    color: #fff !important;
}
</style>

Can you try replace to this code @AdamR1983 

[AdamR1983]

ADD URL https://medicetics.com/pages/book-now

Semi working! The text is different and not centred with the below code 
<style>
.btn {
background-color: #E5016E !important;
color: #fff !important;
text-align: center !important;
display: flex;
align-items: center;
justify-content: center;
height: 100%; /* Ensure the button has a defined height or is part of a layout that constrains its height */
}
</style>

[BSS-TekLabs]

<style>
.btn {
background-color: #f51d97 !important;
    text-align: center !important;
    color: #fff !important;
    align-items: center !important;
justify-content: center !important;
}
</style>

Can you try this code @AdamR1983 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[AdamR1983]

Sent a meeting request from the help today, but again thanks!!

Okay so it's not centred 
<style>
.btn {
background-color: #E5016E !important;
color: #fff !important;
text-align: center !important;
display: flex;
align-items: center !important;
justify-content: center !important;
height: 100%;
font-weight: bold; /* Makes the text bold */
}
</style>

[BSS-TekLabs]

Can you share your store url?

[AdamR1983]

https://medicetics.com/pages/book-now

[BSS-TekLabs]

<style>
.btn {
background-color: #f51d97 !important;
    text-align: center !important;
    color: #fff !important;
    align-items: center !important;
justify-content: center !important;

padding: 0px 20px !important;
    height: 40px !important;
    line-height: 40px !important;
}
</style>

Can you try this code @AdamR1983 

[BSS-TekLabs]

[Tech_Coding]

Hello @AdamR1983 
replace this css
.btn {
padding: 10px 20px;
background-color: #f51d97; /* Pink background */
color: #fff; /* White text */
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin: 10px 0; /* Adds some vertical space between buttons */
}

And add this CSS:
.btn {
padding: 10px 20px;
background-color: #f51d97 !important; /* Pink background */
color: #fff !important; /* White text */
text-decoration: none;
border-radius: 5px;
display: inline-block;
margin: 10px 0; /* Adds some vertical space between buttons */
}

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.