Need help customising my add to cart button that pops up on hover

Store Design
, , , ,
1

I Need help customising my add to cart button /Quick add button that pops up on hover on the collection page to be an outline button.

My store: https://arabiancreed.com/collections/arabian-collection

Please refer to https://dossier.co/collections/all-perfumes (Just hover on a product card to see what I am trying to achieve) Thank you

2

Hello @Ked , working as expected
https://www.awesomescreenshot.com/video/33399974?key=4be25546c05dc357f0822cc86529b521

3

Hi @Ked

You can achieve the same popup layout by adding this CSS
Go to Shopify Admin > Themes > Edit code
Find base.css or theme.css

past that CSS code their

.m-product-card__media .m-product-card__action { transform: unset !important; opacity: 0; }
.m-product-card__media button.m-add-to-cart { background: #ffffff99; border: 1px solid black; box-shadow: none !important; color: black; }
.m-product-card__media button.m-add-to-cart:hover { background: white; }
.m-product-card__media:hover .m-product-card__action { opacity: 1; transition: all var(--m-duration-default, .25s) ease; }

If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee