Problem mit dem Hover und CSS

[brando]

Hallo ihr lieben,


ich habe eine Joomla Seite mit einem integriertem Shop System von Virtuemat.

Folgendes Problem, ich habe dort einen Button "In den Warenkorb", diesem habe ich einen Verlauf per CSS eingefügt ( Code folgt gleich).
Wenn ich auf den Button gehe, dann kommt dort im Firefox aber nur ein roter Balken, diesen würde ich aber gerne in einen entgegensetzen Verlauf verändern wollen. Wie mache ich das ?
Das andere Problem ist, das ich in der gesamten Auswahl der Produkte den Button richtig angezeigt bekomme, aber wenn ich auf ein einzelnes PRodukt gehe, dann fehlt auf der linken Seite des Buttons ein Pixel vom Verlauf, warum ?
Ihr könnt gerne selber mal schauen unter https://www.broetchen.net/


Den Code poste ich auch mal für das CSS, was wiederum von dem integriertem Shopsystem stammt...

span.addtocart-button span.addtocart-button, span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button, span.addtocart-button span.addtocart-button-disabled{
max-width: 100%;
background-image:linear-gradient(to bottom left, yellow, red);
color: #fff;
border: solid #777 1px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
text-align: center;
letter-spacing: 1px;
padding: 8px;
margin-bottom: 0;
}

Schon mal im Vorwege ganz lieben Dank an euch


Gruss brando