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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024