Resize AddToCart Button on QuickView And Change Color Hover

[Optimist1]

Hey,

Website URL: happyoff.com

It's The QuickView Popup

- I want to make the AddToCart Button bigger. (Scale X2)

- For Wishlist Button and Social Shares: Change the Hover color from #56cfe1 to #C67D4E

Thanks a lot 🙏

[Pooja-Tiwari · Accepted solution]

Hi,
- I want to make the AddToCart Button bigger. (Scale X2)
Reply : edit this css open main-product.css file and edit this css see below
.t4s-product-form__buttons .t4s-product-form__submit {
padding: 5px 88px;
}
2) For Wishlist Button see below

.t4s-product-form__buttons .t4s-pr-wishlist:hover {
 color: #C67D4E;
border-color: #C67D4E;
}

Please edit this css

[Optimist1]

Thanks a lot, It's working for the AddToCart Button and the wishlist, but changing the hover color has not been in all the social media Shares

I appreciate any help you can provide. 🙏

[Pooja-Tiwari]

i will send you css of social media shares please wait.

[Optimist1]

Also, Resize the Text "Add To Cart" to be bigger as button, Thanks a lot brother 🙏

[Pooja-Tiwari]

This is the css of social share icon hover please open the icon-social.css file edit this css

@media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1025px) {

    .t4s-socials.t4s-socials-style-3 a.facebook:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.twitter:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.pinterest:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.tumblr:hover {

        color: #C67D4E;

        border-color:#C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.telegram:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.email:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

}
open main-product.css file and edit this css this is the Text "Add To Cart" to be bigger as button css
.t4s-product-form__buttons .t4s-product-form__submit {
font-size: 18px;
}
 If helpful then please Like and Accept Solution.

[Optimist1]

Not Working brother

[Pooja-Tiwari]

Hi,
Ok If you want I will do this for you. send me store url and collaborator access code.

[Pooja-Tiwari]

Please open the css file icon-social.css file and edit this css see below

@media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1025px) {

    .t4s-socials.t4s-socials-style-3 a.facebook:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.twitter:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.pinterest:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.tumblr:hover {

        color: #C67D4E;

        border-color:#C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.telegram:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

    .t4s-socials.t4s-socials-style-3 a.email:hover {

        color: #C67D4E;

        border-color: #C67D4E;

    }

}

If helpful then please Like and Accept Solution.

[Aatiqa]

Kindly, follow the below steps to fix your problem:

1) From your Shopify admin dashboard, Go to Online Store
2) Choose the theme which you wanna edit and click on Edit Code
3) Add this code in the end of theme. liquid file above </body

<style>
.t4s-product-form__buttons>.t4s-flex-wrap {
        flex-wrap: nowrap !important;
        transform: scale(1.5) !important;
        margin-left: 58px !important;
    }
}

</style>

If I was able to help you and my solution worked well for then, please don't forget to Like it and Mark it as Solution.

Best Regards,
Aatiqa