Shopify themes, liquid, logos, and UX
Howdy everyone,
I'm trying to add the hover effect to my "Add To Cart" button to become the cart icon as we hover the mouse over. I would really appreciate it if anyone could help us! Will be a great add-on to the community!
Our website is https://www.rowabi.com/ or https://wabi-element.myshopify.com/
Thanks in advance fellas!
Before hover:
After hovering the mouse over:
Solved! Go to the solution
This is an accepted solution.
oh sorry for that can you remove last one code and update this
.paymentButtonsWrapper #AddToCart::before {position: absolute;font-family: 'fontello';width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;}
.paymentButtonsWrapper #AddToCart {position: relative;}
.paymentButtonsWrapper #AddToCart:hover::before {opacity: 1;transform: scale(1);}
.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {display: none;}
look at this code work
This is an accepted solution.
To help understand the solution, I just re-format it:
This is an accepted solution.
can you please try this code
button.quick-add-button::before {position: absolute;width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;font-family: 'fontello';color: #000;}
button.quick-add-button {position: relative;}
button.quick-add-button:hover::before {opacity: 1;transform: scale(1);}
button.quick-add-button:hover {color: #eeeeee !important;border-color: #000 !important;}
sorry for that issue can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.min.css ->paste below code at the bottom of the file.
.paymentButtonsWrapper #AddToCart::before {position: absolute;content: "";width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;}
.paymentButtonsWrapper #AddToCart {position: relative;}
.paymentButtonsWrapper #AddToCart:hover::before {}
.paymentButtonsWrapper #AddToCart:hover::before {opacity: 1;transform: scale(1);}
.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {display: none;}
@KetanKumar I just tried, somehow the Add To Cart is blackout after applying the codes.. I think now if we can add the Cart Icon in the middle of the empty blackout bar, it would be perfect!
This is an accepted solution.
oh sorry for that can you remove last one code and update this
.paymentButtonsWrapper #AddToCart::before {position: absolute;font-family: 'fontello';width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;}
.paymentButtonsWrapper #AddToCart {position: relative;}
.paymentButtonsWrapper #AddToCart:hover::before {opacity: 1;transform: scale(1);}
.paymentButtonsWrapper #AddToCart.add-to-cart--secondary:not(.disabled):hover span {display: none;}
look at this code work
This is an accepted solution.
To help understand the solution, I just re-format it:
yes, correct
@KetanKumar Quick question upon that, do you know how I could change from the "Cart" to the "Bag" icon? 🙂
yes, please check your icon font family font-family: 'fontello'; just change icon code
@KetanKumar Perfect works! Appreciate it!!
I'm trying to apply the same logic, for different part ("Featured Products" - Our Best Sellers). However, the "Add To Cart" won't disappear when the cart shows up, do you know any clues why? Thanks a lot !!
.grid-view-item .quick-add-button::before {
position: absolute;
font-family: 'fontello';
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 12px;
content: '\e802';
opacity: 0;
transform: scale(0);
transition: all 0.5s;
}
.grid-view-item .quick-add-button {
position: relative;
}
.grid-view-item .quick-add-button:hover::before {
opacity: 1;
transform: scale(1.3);
}
.grid-view-item .quick-add-button:hover {
display: inline;
background-color: white;
}
This is an accepted solution.
can you please try this code
button.quick-add-button::before {position: absolute;width: 100%;height: 100%;left: 0;right: 0;top: 12px;content: '\e802';opacity: 0;transform: scale(0);transition: all 0.9s;font-family: 'fontello';color: #000;}
button.quick-add-button {position: relative;}
button.quick-add-button:hover::before {opacity: 1;transform: scale(1);}
button.quick-add-button:hover {color: #eeeeee !important;border-color: #000 !important;}
its my pleasure to help us
theme.min.css not available in dawn theme
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024