How to change position of buy button on products from collection page

[CAVinhus]

Hello

I am looking to change the position of the buy now button on my products. I already have a hover effect on it and wish for the button to be in the middle of the product image so when you hover over the product the buy button appears in the middle of the products image.

The code I used for the hover effect is:

.product-card-wrapper .quick-add {
display: none; /* Hide button initially */
}
.product-card-wrapper:hover .quick-add {
display: block; /* Show button on hover */
}
.product-card {
/* Other styles */
text-align: center; /* Centers the button */
}

[Dan-From-Ryviu]

Hi @CAVinhus 

Could you share the link to your page? 

[CAVinhus]

https://cavinhus.dk/

pass: auskay

[Dan-From-Ryviu · Accepted solution]

Please update this code from this 

.product-card-wrapper:hover .quick-add {
display: block; /* Show button on hover */

To this 

.product-card-wrapper:hover .quick-add {
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
}

[CAVinhus]

Thank you so much this worked! Do you also know how I changed the text on the button?

[Dan-From-Ryviu]

You can change text from your store admin > Sales channels > Online Store > Themes > click "..." in Current theme > Edit default theme content, search and change that text.