button verliert durch background-image Funktionalität

[Matthias Scharwies]

Servus!

Ich bin gerade völlig ratlos. Ich will als Alternative für das CSS-Bilderkarussell einen JS-Player bauen. Die Normal-Variante arbeitet mit Unicode-Zeichen. Da es für shuffle kein Unicode-Zeichen ohne Hintergrund gibt, setze ich es als SVG-Hintergrundbild ein:

Button mit Hintergrundbild (größer Zoomen)

Das funktioniert, aber plötzlich sind die Einstellungen für border (jetzt style:outset), background-color und die :hover-Effekte weg???

Habt ihr ...

eine Erklärung???

eine Lösung???

(Dass ich den Player völlig umbauen muss, ist mir klar.) Im vorigen Beispiel bedeutete ► das Abspielen der Animation.

Eigentlich müssten diese Buttons ► ◄ ja "Bild vor" und "Bild zurück" bedeuten, oder?

►► könnte dann ja automatisch abspielen bedeuten und könnte mit "Pause" toggeln oder "Pause" müsste zwei Farben bekommen - sonst weiß man nicht, was aktiviert wurde und was nicht.

Herzliche Grüße und vielen Dank im Voraus!

Matthias Scharwies