Styling all the Highend buttons

  • In Progress
    Posted in: Highend WP Theme  

  • Customer
    dawusa
    July 10, 2019 at 10:24 pm #140517

    Here’s what I’ve tried

    First, I tried this:
    button {
    background-color:#f15352;
    border:none;
    border-radius:5px;
    color:#fff;
    font-weight:900;
    padding:5px;
    margin:0 auto;
    }

    Then, I tried this:

    /* Styling High End Theme Buttons */
    .hb-button {
    color:#fff;
    font-size:large;
    }
    .hb-button:hover {
    color:#fff;
    font-weight:900;
    }
    h2, h5 {
    color:#51adc7;
    }

    Finally, I did this (which I’m still working on):

    /* Styling High End Theme Buttons */

    /* getting rid of HB drop shadow */
    body .hb-button.hb-small-button,
    body input[type=submit] {
    box-shadow: none !important;
    }

    /* The ineffable checkout buttons */
    /* .button.hb-update-cart,
    .checkout-button.button.alt.wc-forward {
    background-color: #f54029 !important;
    border-radius:6px !important;
    box-shadow: none !important;
    color:#fff !important;
    display:inline-block !important;
    font-size:10pt!important;
    font-weight:900 !important;
    margin:0 !important;
    padding:5px 10px !important;
    text-align:center !important;
    }
    .button.hb-update-cart:hover,
    .checkout-button.button.alt.wc-forward:hover {
    background-color:#000 !important;
    color: #f54029 !important;
    } */

    .hb-button,.button.hb-update-cart,
    .checkout-button.button.alt.wc-forward {
    background-color: #f54029 !important;
    border-radius:6px !important;
    box-shadow: none !important;
    color:#fff !important;
    display:inline-block !important;
    font-size:10pt!important;
    font-weight:900 !important;
    margin:0 !important;
    min-width:120px !important;
    padding:5px 10px !important;
    text-align:center !important;
    }
    .hb-button:hover,
    .button.hb-update-cart:hover,
    .checkout-button.button.alt.wc-forward:hover{
    background-color: #000 !important;
    color: #f54029 !important;
    }
    .hb-button a {
    text-decoration: none !important;
    }

    What I need, is for the buttons to look like the ones I styled for the WooCommerce buttons, which also need some tweaking, as I was red buttons with white text changing to black buttons with red text on hover.

    There’s also the issue of the odd little button inside the larger one.
    How do I get rid of that?

    Here’s what I’ve done there so far:

    /* WooCommerce Buttons styling */
    #main-wrapper .single_add_to_cart_button {
    border-radius:5%;
    background: #f54029 !important;
    color: #fff !important;
    font-weight:900 !important;
    line-height:1 !important;
    padding:0 20px !important;
    }
    #main-wrapper .single_add_to_cart_button:hover{
    background: #000 !important;
    color: #f54029 !important;
    }

    You can see them on a non-product page here:
    https://daw-usa.com/page-tester-1/

    and on an actual product page here:
    https://daw-usa.com/product/slk-multi-matrix/

    See that the WooCommerce buttons text didn’t change with the above CSS

    Is there something else I should be doing to get all these buttons to look the same?

    My regular computer is in the shop for a new graphics card, so PLEASE contact me at roddio1@mac.com so I can respond from my iPhone.

    Sorry, this forum is for verified users only. Please Login or Register to continue

Comments are closed.