Consistent Buttons

Yes, you just need to add :hover right after the CSS selector which is a.checkout-button.button.alt.wc-forward. So it would be like this:

a.checkout-button.button.alt.wc-forward:hover {
   your-custom-css;
}

That's the hover trick :)

I tried that, but then it just displays the purple button and then the oval teal button only when I hover over it.

a.checkout-button.button.alt.wc-forward:hover {
padding: 14px 30px;
border-radius: 40px;
border-width: 0;
font-weight: 600;
font-size: 18px;
font-family: "Montserrat", sans-serif;
color: #ffffff;
background-color: #05bcbf;
}

Solved it! I used the code you gave me originally and added the bit for that stubborn button :)

.blog a.read-more.button:hover, .woocommerce ul.products li.product .button:hover, .woocommerce.single-product form.cart .button:hover, .page .woocommerce .return-to-shop a.button.wc-backward:hover, .woocommerce-page #payment #place_order:hover, a.place-order.button.alt.wc-forward:hover, a.checkout-button.button.alt.wc-forward:hover{
color: #ffd246;
}

THANK YOU SO MUCH everyone!

Yes yes!

Sorry I didn't make myself clear, the original CSS need to be kept, then you add the extra for hover.

Glad you figured it out :) Yay!

please don't hate me but how can I do the same styling to the "post comment" button on the single posts?
I tried this but no luck :(

button,
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
background: #04B9BE;
color: #ffffff;
border-color: #ffffff;
padding: 14px 30px;
border-radius: 40px;
border-width: 0;
}

Hi there,

Your code looks like it should work.

Can you link me to a single post with the code applied?

It is the post comment button on the blog posts: https://lifeandworkflow.com/?p=19079
The edges are not rounded. All the other buttons on the site are good now.

You have this CSS which is overriding the other CSS:
https://www.screencast.com/t/GMufLOsh

Try to disable it see if that fix the problem.

that did it! Thank you again!

Great!

Glad to help :)