Transition und Keyframes


Andrin.Spitzer

Erfahrenes Mitglied
Hay. Ich möchte mich kurz bedanken jetzt funktioniert es sehr gut. :D

Leider verhalten sich die Buttons komisch sie springen herum und der hover effeckt mit der border transition funktioniert erst wen ich vom Button gehe.
 

basti1012

Erfahrenes Mitglied
Meinst du die Buttons Spielplan und reglement ?
Das Springen ist eigentlich kein springen.
Durch den hover wird ein Border gesetzt der vor hover nicht da ist.
Dadurch werden beide Buttons um 2px größer und breiter.
Das sieht dann so aus das alles springt.

Gib den Buttons vorher einen unsichtbaren Border dann ist das weg
Code:
.button {
    margin: 0.5em 0em;
    width: 90%;
    max-width: 15em;
    color: white !important;
    background-color: black;
    text-align: center;
    border: 1px solid transparent;/*  das dazu schreiben */
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
Was für ein Effekt haben die Border den gemacht ?
Zur Zeit zeigen die bei mir keinen Effekt, nicht beim hovern und auch nicht wenn ich da runter gehe
 
Zuletzt bearbeitet:

Andrin.Spitzer

Erfahrenes Mitglied
Meinst du die Buttons Spielplan und reglement ?
Das Springen ist eigentlich kein springen.
Durch den hover wird ein Border gesetzt der vor hover nicht da ist.
Dadurch werden beide Buttons um 2px größer und breiter.
Das sieht dann so aus das alles springt.

Gib den Buttons vorher einen unsichtbaren Border dann ist das weg
Code:
.button {
    margin: 0.5em 0em;
    width: 90%;
    max-width: 15em;
    color: white !important;
    background-color: black;
    text-align: center;
    border: 1px solid transparent;/*  das dazu schreiben */
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
Was für ein Effekt haben die Border den gemacht ?
Zur Zeit zeigen die bei mir keinen Effekt, nicht beim hovern und auch nicht wenn ich da runter gehe
Ja denn auch aber mehrheitlich die class="link-title"
 

basti1012

Erfahrenes Mitglied
versuche es mal so
Code:
.link-title {
    border: 1px solid transparent;
    transition: border 1s;
}

.link-title:hover {
    border: 1px solid white;
}
bzw das transition beim hover rein machen.
Weiß nicht genau wie es vorher wahr