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!
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
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.
Sure, Please add the given CSS
body product-info .quantity:after {
box-shadow: 0 0 0 1px #184F2E;
}
Thanks
Thank you @Sweet_Savior_3 , but is it actually possible to make the green box slightly opaque like the these other elements ? See below.
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
Thank you so much!
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!