How can I style my product and contact page buttons with specific colors?

Store Design
1

Hello,

I would like the buttons on my product page, as well as the submit button on my Contact page to be styled with the colours I’ve outlined as my “secondary button” colour choices.

Is anyone able to help?

Secondary Button Background: #414042
Secondary Button Text: #FFFFFF
Secondary Button Background Hover: #DEDBD0
Secondary Button Text Hover:#414042

Product Page
https://ie7ji1dvxi859q3y-26037026838.shopifypreview.com

Contact Page
https://ie7ji1dvxi859q3y-26037026838.shopifypreview.com

1 Like
2

@Tia34

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.mini.css ->paste below code at the bottom of the file.
form#contact_form .contact-form--submit-button .btn {
background: #414042;
color: #FFFFFF;
}
form#contact_form .contact-form--submit-button .btn:hover {
    background: #DEDBD0;
    color: #414042;
}
3

Thank you!

This did work for the contact page, do you happen to know how I can do the same on the product page as well?

Tia

1 Like
4

@Tia34

yes its work as well give me product url if doesn’t work so i will check

5

Here it is!

Will this make sure to change the button styling whenever the product is shown?

Thank you

https://hd2rcjyq2gez0fz1-26037026838.shopifypreview.com

1 Like
6

@Tia34

yes i can see this look

KetanKumar_0-1635270130043.png
KetanKumar_0-1635270130043.png1920×1080 439 KB

i have check same color code as per your code let me know what do you need this part?

7

Hello,

I think we are talking about a different section. I am referring to the buttons located underneath the products here.

Screen Shot 2021-10-26 at 3.08.06 PM.png
Screen Shot 2021-10-26 at 3.08.06 PM.png3158×1828 682 KB

1 Like
8

@Tia34

oh i see yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/custom.css ->paste below code at the bottom of the file.
a.quick-add-button-variants {
background: #414042;
color: #FFFFFF;
}
a.quick-add-button-variants:hover {
    background: #DEDBD0;
    color: #414042;
}
9

Hi Ketan,

Unfortunately it doesn’t seem like that code is working.

Tia

10

@Tia34

yes please try this code

a.quick-add-button-variants {
background: #414042 !important;
color: #FFFFFF !important;
}

a.quick-add-button-variants:hover {
    background: #DEDBD0 !important;
    color: #414042 !important;
}