Enlarge button add to cart

Explorer
31 1 2
Hi I would like to enlarge the Add to Cart button. This is my site: https://joyajewelrystore.com/
0 Likes
Shopify Partner
434 83 93

Hello Joya,

To enlarge Add to cart in your store.
Edit styles.scss.css under Assets,  search for .add_to_cart.action_button and increases 44px a/to your need.
Right away its like this 

.add_to_cart.action_button 
min-height: 60px;
margin-bottom: 0;

 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Explorer
31 1 2
0 Likes
Shopify Partner
434 83 93

addtocart.png

Please check screen-shot, button will look like this after modifying css.

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Explorer
31 1 2

I added it here :

12.png

0 Likes
Explorer
31 1 2

It looks like this:12.png

0 Likes
Shopify Partner
434 83 93

You are add it in bottom of css files so its necessary to add important 
.add_to_cart.action_button {
min-height: 60px !important;
}
Please use this

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Explorer
31 1 2

It works great how you can make the button shake like this: 

https://treasurefan.com/products/led-teddy-bear

12.png

0 Likes
Shopify Partner
434 83 93

Use

.add_to_cart.action_button {
    min-height: 60px !important;
    background: #ffa200 !important;
    border: 1px solid #ffa200 !important;
    box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.2);
    margin-bottom: 0;
    font-weight: bold !important;
}
button.action_button.add_to_cart:hover {
    background: #e89300 !important;
    border: 1px solid #e89300 !important;
}

for animation you have to use jQuery and if you want to increases its width, first increases of parent width.
 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Explorer
31 1 2

It works. How to do the animation?

0 Likes