Custom Add to Cart button

I am helping the owner of a site that has Hikashop. They want to add a custom Add To Cart button. I have successfully accomplished this by editting the CSS in the backend, but when I do that ALL the other buttons relating to the shop also change.

I'd like to leave all the normal buttons (proceed to checkout, login, registration, continue shopping, etc) as they are and just change the Add To Cart button (beside the product image) to the image attached.

Basically I want to just add this to the CSS and make the change in the code to change the class to hikashop_cart_button2... leaving the normal button as is. Is this possible? Where would I change the Add To Cart button class?

a.hikashop_cart_button2, a.hikashop_cart_button2:hover{
	background-image:url(../images/add_to_cart_custom.jpg);
	text-decoration:none;
	cursor:pointer;
	float:left;
	white-space:nowrap;
	width:354px;
	height:140px;
}

Don't understand what you mean. I tried adding that with no attributes and it still changes all the other buttons. Where do I add that CSS?

Initially i changed the "a.hikashop_cart_button, a.hikashop_cart_button:hover" class to how I wanted the button to be displayed but when I did... ALL Hikashop buttons changed on the that as well... in the modules.

Ok figured it out...

Basically changed this...

/* cart buttons */

a.hikashop_cart_button, a.hikashop_cart_button:hover{
	background-image:url(../images/button.jpg);
	border:1px solid #356AA0;
	color:#000000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	padding:5px 8px;
	text-decoration:none;
	cursor:pointer;
	float:left;
	white-space:nowrap;
}
a.hikashop_cart_button:hover{
	outline: 2px solid #92C1FF;
}

/* cart buttons */
.hikashop_product_page a.hikashop_cart_button, .hikashop_product_page a.hikashop_cart_button:hover{
	background-image:url(../images/add_to_cart_custom.jpg);
	background-repeat:no-repeat;
	margin-right:-20px;
	cursor:pointer;
	float:left;
	border: none;
	width:354px;
	height:140px;
}

a.hikashop_cart_button, a.hikashop_cart_button:hover{
	background-image:url(../images/button.jpg);
	border:1px solid #356AA0;
	color:#000000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	padding:5px 8px;
	text-decoration:none;
	cursor:pointer;
	float:left;
	white-space:nowrap;
}
a.hikashop_cart_button:hover{
	outline: 2px solid #92C1FF;
}

Update... I had to remove this CSS... it was creating an outline when hovering over the new Add To Cart button...

a.hikashop_cart_button:hover{
	outline: 2px solid #92C1FF;
}

Where would I find that? I know it is a css but as you know there hundreds of folders to search through and it would help a lot if you could tell where to find it.
Thanks

nicolas wrote: You need such css:

.hikashop_product_page a.hikashop_cart_button{
}