Vor-Zurück Button Farbig

Hallo,
ich habe hier aus dem Forum folgenden code schnipsel

#back-button:not([disabled="true"]):not([open="true"]):not(:active){
	fill: green !important; 
	}




#forward-button:not([disabled="true"]):not([open="true"]):not(:active){
	fill: red !important; 
	}

wie kann ich jetzt den Originalen hover effekt bei behalten der auch auf den "Seite vor" Button zusehen ist (roter PFeio mir kleines graues kästchen) ?

[attachment=1]Unbenannt-1.png[/attachment]

der Seite zurück" button soll genauso aussehen im normalen und aktiven zustand wie der andere

wenn man im Anpassungfenster die dichte ändert auf kompakt, dann stimmt der zurückbutton.
Und genau so möchte ich den buttn auch haben nur in Standard Themen und Dichte Normal.
[attachment=0]Unbenannt-2.png[/attachment]

im Anpassfenster habe ich auf kompakt gestellt, dann stimmen die Pfeile so wie ich möchte.

wenn ich wieder auf Standard (normal) umstelle stimmen die Pfeile nicht mehr (ist klar) aber dafür die Tabhöhe.

könnte man die Pfeile nicht so wie in kompakt hin bekommen mit samt den hover Effekt ?

[attachment=0]Unbenannt-1.png[/attachment]

ich würde auch das kompakt nehmen aber ich weis nicht was alles noch geändert wird auser die Tab und Menubar höhe.

jetzt habe ich mir den css Code für "#back-button" rausgesucht wenn man die Dichte auf kompakt umstellt.

ich habe leider keine Ahnung wie man das in Dichte "Norma"l hinbekommen kann.

ich hoffe das ist alles an css was man gebrauchen könnte .

:root:not([uidensity=compact]) #back-button {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-inline-start: 5px !important;
  padding-inline-end: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  border-radius: 0 10000px 10000px 0;
}


:root:not([uidensity=compact]) #back-button:-moz-locale-dir(rtl) {
  border-radius: 10000px 0 0 10000px;
}


#back-button > menupopup {
  margin-top: -1px !important;
}


:root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
  background-color: var(--backbutton-background);
  background-origin: padding-box;
  background-clip: padding-box;
  border: 1px solid var(--backbutton-border-color);
  border-radius: 10000px;
  width: 32px;
  padding: 7px;
  transition-property: box-shadow;
  transition-duration: var(--toolbarbutton-hover-transition-duration);
}


:root[uidensity=touch] #back-button {
  padding-top: 1px;
  padding-bottom: 1px;
}


:root[uidensity=touch] #back-button > .toolbarbutton-icon {
  width: 38px;
  padding: 10px;
}


:root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  background-color: var(--backbutton-hover-background) !important;
  box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
  border-color: hsla(240,5%,5%,.35);
}


:root:not([uidensity=compact]) #back-button[open] > .toolbarbutton-icon,
:root:not([uidensity=compact]) #back-button:not([disabled]):hover:active > .toolbarbutton-icon {
  background-color: var(--backbutton-active-background) !important;
  border-color: hsla(240,5%,5%,.40);
}

schaut euch doch mal bitte die Bilder an, das kann doch nicht sein das man den Zurück Button nicht so hinbekommen kann wie der Vor Button aussieht oder ?

Ansicht normal
[attachment=2]Unbenannt-1.png[/attachment]

Ansicht wenn Aktiv
[attachment=1]Unbenannt-2.png[/attachment]

Ansicht wenn Aktiv und mit hover
[attachment=0]Unbenannt-3.png[/attachment]

klar habe ich auch hier im Forum gesucht, aber bis jetzt nur gefunden wie man die Buttons einfärben kann.

wie gesagt, ich weis nicht mehr weiter.

...

...