in Toolbar Button einzelnt ändern ?

    Hallo,

    ich möchte in meiner Toolbar die buttons für Abrufen, Verfassen, Adressbuch je einzelnt ändern.

    hiermit werden komplett alle buttons geändert die in der Toolbar sind

    Code
    .button.toolbar-button[open="true"],
.button.toolbar-button:not([disabled="true"]):hover,
.button.unified-toolbar-button:enabled:is([aria-pressed="true"], :hover) {
  color: var(--button-hover-text-color);
  background-color: var(--toolbar-button-hover-background-color);
  border-color: var(--toolbar-button-hover-border-color);
}

    genau das selbe möchte ich aber für jeden einzelnen Buttonhaben damit ich z.B Abrufen Rot, verfassen in Grüm und Adressbuch in Pink bekomme.

    wie mach ich das ohne den button zu vergrößern oder sonst in der Form zu ändern

    • Hilfreichste Antwort
    Zitat von Tapo

    genau das selbe möchte ich aber für jeden einzelnen Buttonhaben damit ich z.B Abrufen Rot, verfassen in Grüm und Adressbuch in Pink bekomme.

    Teste bitte mal die anzupassende Rohversion, sprich die Farben musst Du noch anpssen.

    und wech

    Dharkness

  • Tapo 10. September 2023 um 18:50

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.

    Wie kann man über die Farbe hinaus auch den Text des Buttons ändern?

    Mein Ergebnis ist noch nicht optimal, weil der Button-Hintergrund beim Hovern nun viel kleiner ist, als beim unveränderten Button. Hier mein Versuch (gebastelt vor allem aus ChaosRacer's Lösung in einem anderen Thread):

    Zitat von Thomas will lernen

    Wie kann man über die Farbe hinaus auch den Text des Buttons ändern?

    Mein Ergebnis ist noch nicht optimal, weil der Button-Hintergrund beim Hovern nun viel kleiner ist, als beim unveränderten Button. Hier mein Versuch (gebastelt vor allem aus ChaosRacer's Lösung in einem anderen Thread):

    Meine Lösung für den Button war mal das ↓ CSS.

    und wech

    Dharkness

    Ah, wunderbar! Danke Dharkness!

    Ich habe noch eine "border-color" hinzugefügt, die die Originale auch haben. Jetzt sehen die Buttons wirklich komplett identisch aus. Phuhh! Mann hey, was ein Akt, nur um den Button-Text zu ändern. :-D

    Danke nochmal!

    CSS
    #unifiedToolbarContent > li.go-back > div > button:hover {
    transition: none !important;
    background-color: #e6e6e6 !important;
    color: transparent !important;
    border-color: #c2c2c2 !important;
}