Je ne fais pas de transition lorsque je ne bouge pas

Question

Je crée un simple bouton avec une transition de soulignement CSS. Toutes les autres transitions de facilité fonctionnent bien (vol stationnaire, facilité, non-stationnaire, décélération), mais le fond de la bordure ne se détend pas. Lorsque vous quittez le vol stationnaire, il revient simplement à la normale sans décrocher.

Voici un stylo-code avec un bouton rapide que j'ai fait pour illustrer le problème.

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

Voici mon 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

Vous n'avez pas défini une frontière avant vol stationnaire, comment le navigateur censé savoir comment faire la transition dehors?

Ajouter ceci:

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