Design button

[MT27]

Hi can you please help me with the CSS code? I want to change the color of the button that says add to bag. make the outline white, inside ''9D9898'' and the colour of letter black

URL: matibrnd.com

password: biangu

[BSS-TekLabs]

- Here is the solution for you @MT27 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
.product-form__submit::after {
    box-shadow: none !important;
}
product-form .product-form__submit {
    background: #9D9898 !important;
    color: black !important;
    border: 2px solid white !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[MT27]

Thank you it worked!! can you please also tell me how to change the text?

[BSS-TekLabs]

Do you want to change the color of the text @MT27 ?

[MT27]

no the actual text

[BSS-TekLabs]

Do you want change text "Add to bag" to other text @MT27 ?

[MT27]

yes too ''Add to Cart''

[BSS-TekLabs]

Do you want like this @MT27 ?

[BSS-TekLabs]

- Here is the solution for you @MT27 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
window.addEventListener('load', function() {
    let btn = document.querySelector(".product-form__submit span");
    btn.innerText = "Add to Cart";
})
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Sangeetanahar]

hello @MT27 

Go to online store ----> themes ----> actions ----> edit code ---->assets ----> base.css...>

add the code end of the file

product-form .quick-add__submit, product-form .product-form__submit {
    background: #9D9898;
    color: #000;
    border: 2px solid white;
}

result

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[Made4uo-Ribe]

Hi @MT27 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

button.product-form__submit:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255, 255, 255, 1), 0 0 0 var(--buttons-border-width) rgba(255, 255, 255, 1);
}
button.product-form__submit:before {
    box-shadow: none;
}
button.product-form__submit {
    background: #9D9898;
    color: black;
}

And save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[EFOLI-Syn]

Hello @MT27,

Please add this code into your Shopify theme's base.css file.

.product-form__submit.button.button--full-width.button--secondary{
    background: #9D9898 !important;
    color: #000 !important;
    border: 2px solid #fff !important;
    font-weight: 600 !important;
}