Archived topic
Clone button styles
1 reply · Started by Pedro on March 31, 2020
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!
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);
}