How to add hover effect to "Add To Cart" becoming Cart icon

[RowabiCo]

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:

[KetanKumar]

@RowabiCo

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;}

[RowabiCo]

@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!

[KetanKumar]

@RowabiCo

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

[RowabiCo]

@KetanKumar oh my God this is gorgeous, thank you so much!!!

[RowabiCo]

To help understand the solution, I just re-format it:

.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;
}

[KetanKumar]

@RowabiCo

its my pleasure to help us

[KetanKumar]

@RowabiCo

yes, correct

[RowabiCo]

@KetanKumar Quick question upon that, do you know how I could change from the “Cart” to the “Bag” icon?

[KetanKumar]

@RowabiCo

yes, please check your icon font family font-family: ‘fontello’; just change icon code

[RowabiCo]

@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;
}

[KetanKumar]

@RowabiCo

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;}

[RowabiCo]

@KetanKumar You are amazing!! Thank you so much!!

[fabroli]

theme.min.css not available in dawn theme