how to change button design

[lavly]

to

more thicker, bigger and shorter
there is no way in my theme customize

https://ig4mzh6fjtkgfdan-64726204648.shopifypreview.com
please help me

[LizHoang]

Hi Lavly

- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file  theme.css and add this code at the end of the file

button#ProductSubmitButton-template--18344952299752__main {
    height: 45px !important;
    background: #6798b8 !important;
    color: #fff !important;
}

Result: 

Best,
Liz

[lavly]

thank you,
but iwant to make this bigger too
can you plz help me one more time?

[faisalxe]

Hello Lavly,

- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file  theme.css and add this code at the end of the file

Note: You can change height and padding value to get your desired size of buttons!

.product-form__input--button input[type=radio]+label {
    padding: 0.5rem 2.4rem;
}

.quantity {
    padding: 0.5rem;
}
button .product-form__submit{
    height: 3.5rem !important;
}

 

[lavly]

thank you ,but it doesnt work

[faisalxe]

Try to put important at the end of each property value and then check or try to change the placement of the code. Put it directly on top of product-template.liquid I hope it will to work.

.product-form__input--button input[type=radio]+label {
    padding: 0.5rem 2.4rem !important;
}

.quantity {
    padding: 0.5rem !important;
}
button .product-form__submit{
    height: 3.5rem !important;
}

[lavly]

and it doesn.t work.....