Back-Button mit Border

  • Firefox-Version
    87.0a1 / 85.0
    Betriebssystem
    openSUSE Leap 15.2

    Hallo,

    ich hab mir um die urlbar und searchbar schöne grüne Rahmen "gebastelt" 8)

    Nun wollte ich das auch noch gern für den Kreis um den Backbutton haben. Mein Ergebnis ist jetzt nicht so dolle ...

    Bekommt man das überhaupt hin oder ist das letztendlich ein Icon, welches dahin geladen wird?

    Viele Grüße,
    reni
    ----------------------------
    OS: Leap15.4 / FF immer aktuell ;)

  • Hallo reni,

    versuche mal das für Deine Bedürfnisse anzupassen, sprich Du musst ein wenig mit den Werten spielen.

    CSS
    #back-button {
      max-height: 36px !important;
      border: 1px solid #F10 !important;
      border-radius: 26px !important;
      padding-block: 0 !important;
      padding-inline: 0 !important;
      margin-top: 2px !important;
    }

    das eine Ebene tiefer liegende image-Element

    Oder so, ich muss mal wieder ein wenig genauer hinschauen. :cursing: Ich gelobe wieder einmal Besserung. :)

    Es grüßt,

    Ralf

    Einmal editiert, zuletzt von Dharkness (13. Februar 2021 um 18:24) aus folgendem Grund: Ein Beitrag von Dharkness mit diesem Beitrag zusammengefügt.

  • Hallo,

    es ist immer sinnvoll, den Code auch zu zeigen, zu dem man Hilfe benötigt. ;)

    Du wirst #back-button bearbeitet haben. Die runde Grafik ist aber das eine Ebene tiefer liegende image-Element, also #back-button > image.

    Sorry, du hast natürlich recht.

    Hier der CSS, den ich bisher für meine grünen Rahmen gemacht habe:

    CSS
    /* Rahmen um Adress- und Suchleiste */
    #urlbar, #searchbar {
    border: 2px solid darkgreen !important;
    border-radius: 10px !important;
    }
    
    
    #back-button {
    border: 2px solid darkgreen !important;
    }

    EDIT: Und könntest du mir mit dem Inspector evt. zeigen, wie man zu dem Image gelangt? Das wäre toll, danke.

    Viele Grüße,
    reni
    ----------------------------
    OS: Leap15.4 / FF immer aktuell ;)

  • :) ich danke euch mal wieder wie verrückt :)

    CSS
    #back-button  > image {
    border: 2px solid darkgreen !important;
    }

    Es fehlte wirklich nur der Weg zum Image - ich lerne noch ;)

    Andreas, deine padding-Anweisugen hab ich weg gelassen. Damit wurde der Pfeil so riesig.

    Viele Grüße,
    reni
    ----------------------------
    OS: Leap15.4 / FF immer aktuell ;)

  • Hm,

    jetzt fehlt nur noch, das der Pfeil auch Grün ist.

    CSS
    #back-button  > image {
    fill: darkgreen !important;
    border: 2px solid darkgreen !important;
    }

    Ja Danke :) wie geil ist das denn - wäre mir jetzt gar nicht so aufgefallen ^^

    Viele Grüße,
    reni
    ----------------------------
    OS: Leap15.4 / FF immer aktuell ;)