How can I alter button styles on my product pages?

[antoinelacour]

Hello!

See above, I would like change these buttons from rounded to squared, and also remove the drop shadow from the quantity selection element. The same as this reference: https://store.emergencemagazine.org/products/practice-booklet-vol-2

The site is www.plantedjournal.shop

Any help would be greatly appreciated!

[Sweet_Savior_3 · Accepted solution]

Hello @antoinelacour 

Please add below CSS in base.css file

product-info .product-form__submit:after {
    border-radius: 0;
    box-shadow: 0 0 0 calc(1px + 0px) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));
}
product-info .product-form__submit:not([disabled]):hover:after {
    box-shadow: 0 0 0 calc(1px + 1.3px) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button),var(--alpha-button-background));
}
product-info .quantity:after {
    box-shadow: 0 0 0 1px rgba(18,18,18, 0.55);
    border-radius: 0;
}
product-info .shopify-payment-button__button--branded .shopify-cleanslate [role="button"]{
  border-radius: 0;
}

Thanks

[Sweet_Savior_3 · Accepted solution]

Hello @antoinelacour 

Please add below CSS in base.css file

product-info .product-form__submit:after {
    border-radius: 0;
    box-shadow: 0 0 0 calc(1px + 0px) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));
}
product-info .product-form__submit:not([disabled]):hover:after {
    box-shadow: 0 0 0 calc(1px + 1.3px) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button),var(--alpha-button-background));
}
product-info .quantity:after {
    box-shadow: 0 0 0 1px rgba(18,18,18, 0.55);
    border-radius: 0;
}
product-info .shopify-payment-button__button--branded .shopify-cleanslate [role="button"]{
  border-radius: 0;
}

Thanks

[antoinelacour]

Hi @Sweet_Savior_3 thank you so much! Is it possible to change the colour of the surrounding box of the quantity button? I would like it to be the same faded green #184F2E as the above "Quantity" text.

[Sweet_Savior_3]

@antoinelacour 

Sure, Please add the given CSS

body product-info .quantity:after {
box-shadow: 0 0 0 1px #184F2E;
}

Thanks

[antoinelacour]

Thank you @Sweet_Savior_3 , but is it actually possible to make the green box slightly opaque like the these other elements ? See below.

[Sweet_Savior_3 · Accepted solution]

Please replace the previous code with the below new code

body product-info .quantity:after {
 box-shadow: 0 0 0 1px rgb(24 79 46 / 0.75);
}

Thanks

[antoinelacour]

Thank you so much!

[antoinelacour]

Hi @Sweet_Savior_3 sorry I just realised there is still the drop shadow. It's very light but still noticeable. Any change we could remove that? Thank you!