フックを解除してもトランジションが緩和されない

Question

CSSの下線を引くと簡単なボタンを作っています。他のすべてのイージートランジションは正常に動作しています（ホバー、イージーイン、ホバー解除、イージーアウト）が、ボーダーボトムは緩和しません。ホバリングをやめると、元に戻さずに元の状態に戻ります。

ここに問題を説明するために作成したクイックボタン付きのコードペンがあります。ここで

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

私のCSSです：

.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

あなたは、ブラウザが出て移行する方法を知っていることになっているか、ホバーの前に境界線を定義していませんでしたか？

これを追加します。

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