Can't adjust button styling anymore

Hi there. I haven’t been able to change the style of my WooCommerce buttons since I created my child theme (or since I upgraded to Sydney Pro…can’t remember which came first). Please help.

Web page: https://rovingsouls.com/merchandise
Also on homepage when you scroll down: https://rovingsouls.com

It especially looks bad on mobile:

Please advise. Thank you so much.

Hello there,

Try this custom CSS code:

    /** 
     * Product button style 
     */
    .wp-block-handpicked-products a.wp-block-button__link {
      background-color: #fff000;
      color: #fff;
      font-size: 16px;
    }

    .wp-block-handpicked-products a.wp-block-button__link:hover {
      background-color: #ff0000;
      color: #000;
    }

    /** 
     * Product grid column on smaller screen 
     */
    @media only screen and (max-width: 680px) {
      .wc-block-grid.wp-block-handpicked-products.has-3-columns .wc-block-grid__product {
        -webkit-box-flex: 1;
        flex: 1 0 50%;
        max-width: 50%;
      }
    }

    @media only screen and (max-width: 480px) {
      .wc-block-grid.wp-block-handpicked-products.has-3-columns .wc-block-grid__product {
        -webkit-box-flex: 1;
        flex: 1 0 100%;
        max-width: 100%;
      }
    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Thank you so much, Kharis! Sincerely. All good now. I am still curious, however, where the coding is (what .php file and what line, if possible) for this button styling? I want to change the words in the button, and maybe even change the shape. I just wish the adjustments available under Appearance > Customize > Buttons still worked for me. Thank you.