2 different span class name for "add to cart button"

[Framar]

Hello,

I added a new "add to cart" button in the categories pages. For button's size reasons, I changed the name of span class for button in the categories page from <span class="addtocart-button"> to <span class="addtocart-button-category">.
In this way I can modify size and color of button in the categories page, but the problem is that on those pages the button doesn't work.

I found in vmprices.js the following code: 

product : function(carts) {
carts.each(function(){
var cart = jQuery(this),
step=cart.find('input[name="quantity"]'),
addtocart = cart.find('input.addtocart-button'),
plus   = cart.find('.quantity-plus'),
minus  = cart.find('.quantity-minus'),
select = cart.find('select'),
radio = cart.find('input:radio'),
virtuemart_product_id = cart.find('input[name="virtuemart_product_id[]"]').val(),
quantity = cart.find('.quantity-input');

if I add a row in this code in this way:

product : function(carts) {
carts.each(function(){
var cart = jQuery(this),
step=cart.find('input[name="quantity"]'),
addtocart = cart.find('input.addtocart-button'),
addtocart = cart.find('input.addtocart-button-category'),
plus   = cart.find('.quantity-plus'),
minus  = cart.find('.quantity-minus'),
select = cart.find('select'),
radio = cart.find('input:radio'),
virtuemart_product_id = cart.find('input[name="virtuemart_product_id[]"]').val(),
quantity = cart.find('.quantity-input');

but still doesn't work!
How can I do to make works both button on both pages?  ( categories page and product detail page )

[GJC Web Design]

would it not be simpler to add a 2nd class?

e.g.  <span class="addtocart-button  categorybut">

and target your css

.addtocart-button.categorybut  {
color:green;
}

or simpler still the cat page will have an enclosing div somewhere thats not on the product detail page

#categorypage  .addtocart-button {
color:green;
}

[Framar]

Now it worls, thanks for your help!