Display issue with custom “add to cart” button

Hi,
I have some issue with changing the contents of the “add to cart” button.
With this code i can successfully change the text to a .png with custom size and color. But when applied, it completely destroy my home page css layout.

/* Single product*/

.single-product .product .single_add_to_cart_button.button
{
 background-color:   #9DC3DA;
	background-image: url(https://tableaux-diamants.ch/wp-content/uploads/2021/08/Fichier-2CartGris.png);
	width: 55px;
	height: 35px;
	background-size: 25px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Archive Page */

.woocommerce .product .add_to_cart_button.button
{
 background-color:   #9DC3DA;
	background-image: url(https://tableaux-diamants.ch/wp-content/uploads/2021/08/Fichier-2CartGris.png);
	width: 55px;
	height: 35px;
	background-size: 25px;
	background-repeat: no-repeat;
	background-position: center;
}

What can cause this issue ?
The issue is not visible right now, but on the screenshots :

Without custom button :
Normal view

With custom button :
Content print on one line, too far up…

The buttons working (i know i have disabled the php fonction to delete the text)
Custom button

Thanks for help !

The page I need help with: [log in to see the link]