Change "Add to cart"&"Proceed to checkout" buttons

-- url of the page with the problem -- : silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose
-- HikaShop version -- : 2.5
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.4.8
-- Browser(s) name and version -- : Firefox 36.0.4

Hello,

Please I would like your help to change the Icons.

I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).

I would like to add different icons to every button.

Is it possible to do?
I read and the similar posts, made the changes but without any success.

Please could you help me?
The Url is: silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose

Hello,
You're issue is probably coming from the CSS code that you used to add your add to cart image, can you tell me which CSS code did you use ?
Using that kind of CSS code for your product page will probably the job :

.hikashop_inserted_product .hikashop_cart_button {
YOUR_CSS_CODE
}

Thank you Mohamed,

Please wait to check it.

Mohamed I use the frontend_custom.css and I added this code to change the color:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{
text-decoration:none;
color: #777777 !important;
cursor: pointer;
display: inline-block;
line-height: 18px;
margin: 5px;
padding: 3px 8px;
text-align: center;

text-shadow:none !important;
border:1px solid;
border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
border-radius:3px;
background-color: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eee));
background: -webkit-linear-gradient(top, #ffffff, #eee);
background: -moz-linear-gradient(top, #ffffff, #eee);
background: -o-linear-gradient(top, #ffffff, #eee);
background: linear-gradient(top, #ffffff, #eee);

border-color: rgba(11, 155, 0, 0.;
outline: 0;
outline: thin dotted \9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(11,155,0,.6);

}

The problem is that when I try to change the add to cart button with my icon then the same icon is on the Proceed to checkout button, on the login button, on the register button, on the add coupon button and on the finish button.

Is there a way to have a different icon on all of these buttons?

Thank you Mohamed!

Nikos