How can I modify the style of cart buttons on my website?

[antoinelacour]

Hello!

See above, I would like to change the style of these buttons to be squared, not rounded and add an outline to the 'Check out' button in green #184F2E

I would also like to change the Quantity element to match the product pages (see example below).

https://plantedjournal.shop/products/movement-poster

- No drop shadow

- Squared box

The site is www.plantedjournal.shop

Any help would be greatly appreciated!

[enzoyuna2023]

Hi, You are using Studio Theme.
Actually you can custom your buttons from theme setting.

.. and use custom css From Theme setting add "Custom CSS" to update checkout button.

button#checkout {
    border: 1px solid #184F2E !important;
    border-radius: 0  !important;
}

[antoinelacour]

Hi @enzoyuna2023 thanks you letting me know that those options are available in the settings!

Regarding the 'Check out' button, can I actually make it a solid green button with white text, and which remains in this state on hover? Currently, on hover, the green outline is being removed.

[enzoyuna2023]

Hi @antoinelacour 
This is the css to make it :

button#checkout {
    border: 1px solid #184f2e !important;
    border-radius: 0 !important;
    transition: all 0.25s ease-in-out;
}

button#checkout:hover {
    background: #184f3e;
    color: #fff;
}

[antoinelacour]

Hi @enzoyuna2023 Sorry you seem to have not understood. I would like to make the button solid green with white text, NOT green outlined with green text. On hover, I would like the button to remain solid green, with an additional green outline added, so the button slightly enlarges.

[enzoyuna2023]

Please just change the background instead of border. 😂