CSS Button - FF Problem (z-index)

Diskutiere CSS Button - FF Problem (z-index) im CSS Forum im Bereich Programmierung; Ich habe einen Button gebastelt , der im FF nicht korrekt angezeigt wird: before:after (z-index: -1) wird beim Firefox nicht nach hinten gesetzt...
Neues Thema erstellen Antworten
  • CSS Button - FF Problem (z-index) Beitrag #1
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
Ich habe einen Button gebastelt , der im FF nicht korrekt angezeigt wird: before:after (z-index: -1) wird beim Firefox nicht nach hinten gesetzt.
Bin neu bei euch und darf noch keinen Link einfügen...

Hier das css:

CSS: 
.nectar-button.jumbo.regular.regular-button,
a.gross,
.wpforms-submit-container button {
    position: relative;
    text-decoration: none !important;
    font-weight: 900 !important;
    z-index: 3;
    font-size: 22px;
    border-radius: 0px !important;
    box-shadow: none !important;
    -ms-transform: translateY(0px) !important;
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;
    display: inline;
    padding: 10px 8px 15px 22px !important;
    border: 4px solid #000000 !important;
    transition: transform 330ms ease-in-out;
    -webkit-transition: all 0.2s linear !important;
    -moz-transition: all 0.2s linear !important;
    -ms-transition: all 0.2s linear !important;
    -o-transition: all 0.2s linear !important;
    transition: all 0.2s linear !important;
}
html body[data-form-submit="regular"] .container-wrap button[type="submit"] {
    padding: 15px 8px 35px 22px !important;
      background: none !important;
    border-radius: 0px !important;
    color: #000 !important;
    box-shadow: none !important;
}
body[data-button-style="slightly_rounded_shadow"] .container-wrap button[type="submit"]:hover, body[data-button-style="slightly_rounded_shadow"] .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    box-shadow: none !important
}
a.gross.gelb {
    background: #FFFFDD
}
.nectar-button.jumbo.regular.regular-button:hover,
a.gross:hover,
.wpforms-submit-container button:hover {
    background-color: rgba(0,0,0,0) !important;
    padding: 10px 15px 15px 15px !important;
}
.nectar-button.has-icon span {
    display: contents;
}

.nectar-button.jumbo.regular.regular-button span,
a.gross span {
    font-weight: 900;
    position: relative;
    right: -10px;
    font-weight: 900 !important;
    font-size: 22px !important;
    font-family: 'Area-Inktrap' !important
}
.nectar-button.jumbo.regular.regular-button span:before,
a.gross:before,
html body[data-form-submit="regular"] .container-wrap button[type="submit"]:before {
    position: absolute;
    z-index: -1 !important;
    left: -14px;
    overflow: visible !important;
    bottom: -14px;
    content: '';
    height: 100%;
    width: 100%;
    background: #FFDD00;
}
.nectar-button.jumbo.regular.regular-button span:after,
a.gross:after,
.wpforms-submit-container button:after {
    position: relative;
    content: '';
    background: url(img/arrow_button.svg) no-repeat;
    height: 12px;
    width: 0px;
    left: 0px;
    top: -1px;
    display: inline-flex;
    opacity: 0;
    margin: 0px 7px 0 7px;
    -webkit-transition: all 0.2s linear !important;
    -moz-transition: all 0.2s linear !important;
    -ms-transition: all 0.2s linear !important;
    -o-transition: all 0.2s linear !important;
    transition: all 0.2s linear !important;

}
.nectar-button.jumbo.regular.regular-button:hover span:after,
a.gross:hover:after,
.wpforms-submit-container button:hover:after {
    width: 22px;
    opacity: 1;
}

Hat eventuell jemand eine Idee? Lieben Dank!
 
  • CSS Button - FF Problem (z-index) Beitrag #2
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
Hier der Link als jpg Anhang
 
Anhänge
  • PfD Greifswald.jpg
    PfD Greifswald.jpg
    7,5 KB · Aufrufe: 4
  • CSS Button - FF Problem (z-index) Beitrag #3
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Die Antwort findest Du hier:
https://stackoverflow.com/questions/7822078/z-index-with-before-pseudo-element
Setting the z-index for the header element creates a new Stacking Context, so the new pseudo element you created can not float behind the header element, because it would have to go outside that Stacking Context.
Zum Vergrößern anklicken....
Deaktiviere ich das z-index:3 bei dem a.nectar-button.jumbo.regular.regular-button verschwindet der gelbe Hintergrund hinter dem Button. Ich nehme an, das ist es, was Du erreichen wolltest?

Du kannst den selben Effekt aber auch erreichen mit box-shadow: -10px 10px #FD0 !important;
 
  • CSS Button - FF Problem (z-index) Beitrag #4
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
LIEBEN DANK Sempervivum!
Mal wieder kleine Ursache - große Wirkung ;)

Irgend wie mag aber auch das -moz-transition: all 0.2s linear !important; nicht greifen, damit es schöner slided wie bei Chrome oder IE
 
  • CSS Button - FF Problem (z-index) Beitrag #5
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
Nun ja: Bei rollover kommt das span:before im FF wieder nach vorne :(
Hätte gerne das einfügen des Buttons über den WP PageBuilder gemacht, damit es benutzerfreundlicher ist, aber da ist das span im a eingebettet:
<a href=""><span>Link</span></a> und damit kommt FF leider nicht klar...
Wenn ich den Button selbst per html einbinde und span außerhalb von a: <a href="">Link</a><span></span> einbette, klappts auch mit FF
 
  • CSS Button - FF Problem (z-index) Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Heißt der letzte Satz, dass das Problem gelöst ist?
 
  • CSS Button - FF Problem (z-index) Beitrag #7
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
Naja - ich würde es halt mit eingebetteten span lösen wollen.
Im FF kommt beim rollover das span (eingebettet) nach vorne (erstes Bild)
Es soll aber im Hintergrund bleiben (zweites Bild)
 
Anhänge
  • 01.jpg
    01.jpg
    11,5 KB · Aufrufe: 0
  • 02.jpg
    02.jpg
    12,1 KB · Aufrufe: 0
  • CSS Button - FF Problem (z-index) Beitrag #8
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Verstehe. Ich habe mir das noch mal angesehen und den Eindruck gewonnen, daas es besser ist, das gestrafft und ohne Ballast neu aufzubauen anstatt das Vorhandene zu reparieren. Dies habe ich entwickelt und im HTML-Inspektor auf deiner Seite getestet:
Code: 
    <style>
        a.btn-border-hover {
            display: inline-block;
            border: 4px solid black;
            padding: 0.5em 1em;
            box-shadow: -10px 10px #FFDD00;
            transition: padding 0.3s linear;
        }

        a.btn-border-hover:hover {
            padding: 0.5em 2em;
        }
    </style>
Code: 
<div class="wpb_wrapper">
    <a class="btn-border-hover" href="#">
          <strong>Mehr</strong>
    </a>
</div>
Ein simples HTML und kein !important. Ich hoffe, es ist das, was Du dir vorstellst.
 
  • CSS Button - FF Problem (z-index) Beitrag #9
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
Danke für deine Anregung. Bin ich ganz bei dir. Das rollover Design ist halt von der Illustratorin so vorgegeben. Das blöde ist halt auch, dass der selbe Button beim Kontaktformular rein muss und der ist per Ajax gecodet, was es schwierig macht, da einen self-html Button einzubinden...
 
  • CSS Button - FF Problem (z-index) Beitrag #10
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Beim Submit-Button auf der Kontaktseite braucht es gar keine Änderung des HTML weil der ein einzelnes Element ist. Umstellung auf box-shadow ist mit wenigen Zeilen CSS möglich:
Code: 
    <style>
        button#wpforms-submit-50:before {
            display: none;
        }

        button#wpforms-submit-50 {
            box-shadow: -10px 10px #FFDD00 !important;
        }
    </style>
Ebenfalls im HTML-Inspektor getestet.
 
  • CSS Button - FF Problem (z-index) Beitrag #11
E
edel
Member
Beiträge
7
Punkte Reaktionen
0
Also wir haben das rollover Design jetzt eingekürzt, so wie du es vorgeschlagen hast - LIEBEN DANK für deine Hilfe!!!
Thema ist hiermit geschlossen...
 
Thema:

CSS Button - FF Problem (z-index)

Oben Unten