Consistent Buttons

Hi there,

Try this CSS:

.blog a.read-more.button, .woocommerce ul.products li.product .button, .woocommerce.single-product form.cart .button, .page .woocommerce .return-to-shop a.button.wc-backward, .forms-layout .form-content-component .form-submit-wrapper .form-submit-btn {
    padding: 14px 30px;
    border-radius: 40px;
    border-width: 0;
    color: #ffffff;
    background-color: #05bcbf;
    font-weight: 600;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Thank you so much for your prompt reply, you guys are amazing.
The code worked well on the main shop page and blog page, but not on the following pages:

https://lifeandworkflow.com/?product=power-organizing-session-3hrs-1-organizer
https://lifeandworkflow.com/?page_id=18537
https://lifeandworkflow.com/?page_id=15

Thank you in advance for your guidance

Lastly, would it be possible to have the text on the buttons hover on this color?: #ffd246 (just like on the buttons I have on the regular pages.

Edited CSS here :)
https://generatepress.com/forums/topic/consistent-buttons/#post-1698102

Thank you!
That fixed the buttons in the single product page, but not the ones on the cart page nor the contact page:
https://lifeandworkflow.com/?page_id=18537
https://lifeandworkflow.com/?page_id=15
Also, is there to change the hover text color on the buttons to #ffd246? To match the buttons we have on the regular pages).
Thank you in advance

The CSS should work, I inspected two pages, one is still loading the original CSS while the other is loading the edited CSS.
https://www.screencast.com/t/CD1ziA7Yf

How did you add the CSS?

Let me know if the pages are working in customizer after you adding the CSS into customizer > additional CSS.

That is weird, I added the code using the "Simple Custom CSS and JS" plugin.
When I view the cart page and the contact page through the customizer I don't see any difference. I also just added the code in the CSS section under the customizer but still no difference.

Now the cart page is loading the edited CSS and it's working fine.
https://www.screencast.com/t/8HHNXFosYd

The contact page's structure is a bit complicated, you could give this a try:

.form-wrapper-component .form-content-component .form-submit-wrapper .form-submit-btn {
    padding: 14px 30px;
    border-radius: 40px;
    border-width: 0;
    color: #ffffff;
    background-color: #05bcbf;
    font-weight: 600;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
}

I think I know what is going on with the shopping cart button. When the shopping cart is empty I can see the styled button, but if you add items to the cart it displays the old one. Any chance the full cart page can display the styled button as well? Sorry for the trouble. Then the same thing happens on the checkout page (when you click on "proceed to checkout").

As for the contact page, sadly that code did not work, maybe because this is an embed form from Monday.com?

Hi there,

Are you pertaining to the proceed to checkout button?
https://share.getcloudapp.com/jkuexxo0

I believe you're trying to do something like this?
https://share.getcloudapp.com/nOulGGw1

If that's the case, try adding this CSS:

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

You can add in color: #ffffff; background-color: #05bcbf; for the colors but you should be able to do this on Appearance > Customize > Colors > WooCommerce and set the colors for the Alt button settings.

As for the contact page, sadly that code did not work, maybe because this is an embed form from Monday.com?

Yeah it's an embedded iframe with a form in it. It has its own stylesheet coming from monday.com's CDN.
https://cdn7.monday.com/assets/pulse/form-1a313f2fc3a2cb35f6df657e8fbb582463e836613ae6230b2ad9fc1b26c6588d.css

Thank you the checkout button works now, thank you so much!
I tried using the code below for the "place your order" button on this page (you can only see what I mean once you have an item in your cart after you press on the checkout button): https://lifeandworkflow.com/?page_id=18538

But it didn't work :( What am I doing wrong?

a.place-order.button.alt.wc-forward {
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;
}

Hi there,

update that CSS to:

.woocommerce-page #payment #place_order,
a.place-order.button.alt.wc-forward {
  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;
}

Thank you! that did the trick.
The only thing I am missing is the hover text color on the buttons like we have on the regular buttons:

Is there a way to add that to the code? the color is: #ffd246
Thank you in advance!

Try this, let me know if there're any buttons missing :)

.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 {
    color: #ffd246;
}

Only missing the hover on one here is the code that did the trick for styling that button, could we add the hoover here?

a.checkout-button.button.alt.wc-forward {
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;
}

Thank you!