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:
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.
This is super helpful!
Now the background is pink but the text is not centered and black. Any idea?
Can you try replace to this code @AdamR1983
ADD URL https://medicetics.com/pages/book-now
Semi working! The text is different and not centred with the below code
.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 */
}
Can you try this code @AdamR1983
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Sent a meeting request from the help today, but again thanks!!
Okay so it’s not centred
.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 */
}
Can you share your store url?
Can you try this code @AdamR1983
