Remove border on add to cart button

Store Design
1

I am trying to change the colour of the add to cart button, which I have managed to do by adding this code to the CSS in the theme settings

Additionally, I would like to remove the border and have a hover-over colour. How can I do this

.button {
background: #cd7024 !important;
color: white !important;
}

2

Hey @Addison99,
Could you please share your store url along with password [if applicable] so that I can can take a look and provide you with the solution code.
Waiting to hear back from you.
Thanks

3

Website is https://8dfa7a-8d.myshopify.com

Also on the iPad the logo site too far down see the image

Inline image
Inline image2160×1620 512 KB

4

In order to Remove the border from the button, add hover effect and fix the issue with the logo you need to paste the following code in the end of base.css file. You can change these values based on your need.

.button::after {
content: none !important;
}
.button:hover {
background-color: #131313 !important;
transition: 0.3s ease-in all;
}

BTW I cannot see issue regarding the logo of our website. Could you tell me the exact responsive size where you facing the issue.
Thanks

5

thats the add to cart button sorted, will want to make other changes to text color like the price and the size of the price worked out how to change the colour but how do i make the price bigger?

6

Hey @Addison99,
For the extra changes requires to do the custom code in your theme file.
Could you please share the 4 digits collab code in the p/m so that I can make the extra changes accordingly.
Thanks

7

Hello @Addison99

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

.button {
background: #cd7024 !important;
color: white !important;
border: none !important;
box-shadow: none !important;
}

/* Hover state */
.button:hover {
background: #a5551c !important;
color: white !important;
}