Übergang nicht erleichtert, wenn nicht schwebend

Question

Ich mache eine einfache Schaltfläche mit einem CSS unterstreichen Übergang erleichtern. Alle anderen Leichtgängigkeitsübergänge funktionieren gut (Schweben, Anheben, Abheben, Ausfedern), aber der Rahmen wird nicht nachlassen. Wenn Sie mit dem Schweben aufhören, wird es einfach wieder normal, ohne sich zu entspannen.

Hier ist ein Code-Stift mit einem schnellen Knopf, den ich gemacht habe, um das Problem zu veranschaulichen.

https://codepen.io/anon/pen/jwgpdv

Hier mein CSS ist:

.gbtn { 
    background: #bba989; 
    text-align: center; 
    line-height: 150px; 
    height: 150px; 
    color: white; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 12px; 
    display: inline-block; 
    transition: all .25s ease; 
    box-sizing: border-box; 
    font-family: "montserrat", serif; 
    padding: 0px 30px; 
} 

.gbtn:hover { 
    background-color: #aa9470; 
    border-bottom: 150px solid #242424; 
} 

Answer 1

Sie eine Grenze vor schweben definierten nicht, wie sollte der Browser weiß, wie man aus dem Übergang?

hinzufügen:

.gbtn { 
border-bottom: 0 solid #242424; 
}