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 · Accepted solution]

@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 · Accepted solution]

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 

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 · Accepted solution]

@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 · Accepted solution]

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 

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 · Accepted solution]

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

[KetanKumar]

@RowabiCo 

its my pleasure to help us 

[fabroli]

theme.min.css not available in dawn theme