[Smoke]

Hallo Leute,

hab einen Button mit Text, dieser Text soll einen "underline Effekt" haben. Die Animation funktioniert aber nur im Google Chrome und im Firefox nicht. Könnte mir vielleicht jemand sagen was ich hier ändern muss? Habe auf jsfiddle ein Beispiel erstellt.

https://jsfiddle.net/rb0ydL3q/4/

LG

[Sailor56]

In deinem Beispiel sehe ich nur 'text-decoration: none;'... setze mal im CSS

button:hover span.underline {
      text-decoration: underline;
}

Dann sollte es klappen.

[Smoke]

Also ich hab dein Css hinzugefügt, aber der Effekt wird nicht ausgeführt.

[Sailor56]

Dann poste bitte deinen Code... HTML und CSS ...hier.
Bei mir funktioniert das ohne Probleme... mit allen Browsern.

[Smoke]

Hab doch die Url vom jsfiddle gepostet ?


CSS

.inquiry-button {

    font-family: 'Playfair Display', Helvetica, Arial, sans-serif;

    cursor: pointer;

    pointer-events: auto;

    padding: .9375em 2.25em;

    background-color: #fbe6c8;

    border: 1px solid #4d4d4d !important;

    outline: none;

    text-transform: uppercase;

    margin-top: 30px;

    display: block;

    margin: 0 auto;

}

.underline {

    position: relative;

    color: #4d4d4d;

    text-decoration: none;

}

.underline:hover  {

    color: #4d4d4d;
 
}



.underline:before {

    display: inline-block;

    content: "";

    position: absolute;

    width: 0%;

    left: 0;

    bottom: 0;

    border-bottom: 1px solid #4d4d4d;

    -webkit-transition: all 0.4s ease-in;

    -moz-transition: all 0.4s ease-in;

    -o-transition: all 0.4s ease-in;

    transition: all 0.4s ease-in;

}



.underline:hover:before {

    width: 100%;

}

button:hover span.underline {
      text-decoration: underline;
}

<button class="inquiry-button" type="submit">
  <span class="underline">Anfrage</span>
</button>

[Sailor56]

Bei mir funktioniert es... hast du mal den Browser Cache geleert?
... oder soll der Unterstrich auch bei nicht 'hover' zu sehen sein.
Dann musst du ...

button span.underline {
      text-decoration: underline;
}

einfügen.

[Smoke]

Cache wurde geleert, funktioniert trotzdem nicht. Nein, der underline soll nicht angezeigt werden, ohne hover. Ich versteh das nicht....

Kannst du mir vielleicht das verbesserte jsfiddle posten?

[Sailor56]

Hab in deinem CSS mal alle Selektoren auf 'button .underline' ergänzt...

.inquiry-button {
    font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
    cursor: pointer;
    pointer-events: auto;
    padding: .9375em 2.25em;
    background-color: #fbe6c8;
    border: 1px solid #4d4d4d !important;
    outline: none;
    text-transform: uppercase;
    margin-top: 30px;
    display: block;
    margin: 0 auto;
}

button .underline {
    position: relative;
    color: #4d4d4d;
    text-decoration: none;
}

button .underline:hover  {
    color: #4d4d4d;
}

button .underline::before {
    display: inline-block;
    content: "";
    position: absolute;
    width: 0%;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #4d4d4d;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

button:hover .underline::before {
    width: 100%;
}

button:hover span.underline {
      text-decoration: underline;
}

Wenn es damit jetzt bei dir auch nicht klappt, dann weiß ich auch nicht weiter.

[Smoke]

Der hover effekt funktioniert jetzt zwar, aber man sieht vorher noch den normal underline also den text-decoration: underline; beim hovern. Bei dir ist das nicht so? Und das ganze im Chrome und Firefox..

Edit: So funktionierts jetzt danke https://jsfiddle.net/rb0ydL3q/33/

[Sailor56]

Doch... das ist bei mir auch so.
Solltest du aber weg bekommen, wenn du im letzten CSS Eintrag das 'underline' wieder durch 'none' ersetzt.

button:hover span.underline {
      text-decoration: none;
}