[Support request] Clone button styles

Home Forums Support Clone button styles

  • This topic has 1 reply, 2 voices, and was last updated 2 months ago by Tom.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1221161
    Pedro

    Hello! I would like to copy the style of some buttons.

    However, my technical knowledge is very little, even though I have tried I cannot do it.

    The buttons that I want to copy are the following:

    – Add to cart
    – Buy now
    – Add to list

    Here’s a screenshot: https://mega.nz/#!PoVBlSrB!pchLPB0reDgjMdVEXRqINMbrZgJFwLleRkhCBIiK75o

    This is the link of the site: https://www.amazon.com/-/es/gp/product/B071DXBJ3L/ref=ox_sc_mini_detail?ie=UTF8&psc=1&smid=A16I7UDEU0NVEG

    Can you help me put the style of those buttons on my site?

    The link of my site is: http://ultrapromociones.com/index.php/producto/single/

    Thank you!

    #1221482
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This isn’t easy, as they use a bunch of different elements just to create a button.

    However, this might be a start:

    button:not(.menu-toggle), html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, .woocommerce a.button, .woocommerce a.button:visited, .woocommerce a.button:hover, .woocommerce button.button.single_add_to_cart_button, .woocommerce button.button.single_add_to_cart_button:visited, a.wp-block-button__link:not(.has-background) {
        background: #f4d078;
        background: -webkit-linear-gradient(top,#f7dfa5,#f0c14b);
        background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
        box-shadow: 0 1px 0 rgba(255,255,255,.4);
        border-radius: 2px;
        font-size: 13px;
        padding: 3px 10px;
        border: 1px solid;
        border-color: #ADB1B8 #A2A6AC #8D9096;
    }
    
    .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after, .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before, .woocommerce form .quantity.buttons-added .minus, .woocommerce form .quantity.buttons-added .plus, .woocommerce form .quantity.buttons-added .qty {
        min-height: 20px;
    }
    
    .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, button.wcqb_button:hover {
        background: #f1c861;
        background: -webkit-linear-gradient(top,#f5d78e,#eeb933);
        background: linear-gradient(to bottom,#f5d78e,#eeb933);
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.