Change hover on add to cart with a code - Dawn Theme 7.01

Store Design
, , , ,
1

Hello good folks

I have played with some thoughts to try another hover on my add to cart button on my main product page, can this be arranged.

Check this sliderhover on Fragrance du bois page, can this be made with a simple code? (add to cart)

https://fragrancedubois.com/collections/for-her/products/sirene

My Page:

www.dekanten.no

I will sure send you a big thank u, and accept the solution for sure. :slightly_smiling_face:

2

Go to your online store → customize ->settings -custom css and paste this code there

.product__info-container .product-form__submit {
    background: #b857ff !important;
    color: #fff !important;
    border: 1px solid #000;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}

.product__info-container .product-form__submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform 0.4s ease;
    transform: translateX(-100%);
    z-index: -1;
}

.product__info-container .product-form__submit:hover {
    color: #000 !important;
}

.product__info-container .product-form__submit:hover::before {
    transform: translateX(0);
}
1 Like
3

Hello and thank u so much, this works as a charm. Really glad to see this get it as i want it. Really good and and big thanks again for helping me out here. :slightly_smiling_face:

4

I’m so glad to hear it’s working well for you! :blush: Thanks for the kind words. If you need help in anything else, let me know.

1 Like
5

Hi again, is it possible to make a code to the buy now button too? Any idea about a nice hover who will fit the one we installed? :slightly_smiling_face:

6

Hi, To add same effect on buy now button you can use this css code

.shopify-payment-button__button{
    background: #b857ff !important;
    color: #fff !important;
    border: 1px solid #000;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}

.shopify-payment-button__button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform 0.4s ease;
    transform: translateX(-100%);
    z-index: -1;
}

.shopify-payment-button__button:hover {
    color: #000 !important;
}

.shopify-payment-button__button:hover::before {
    transform: translateX(0);
}
1 Like
7

Hi again and thank you very much, im happy with the result and thank u so much again for the big help. Youre amazing though. :slightly_smiling_face:

8

Thanks for the kind words :slightly_smiling_face:

1 Like