ホバーでdivの高さを変更すると短くなるコントロール側

Question

私はこのホバー効果をボタンに使用していますが、高さが変更されたいくつかのケースでは、トップが同じままでボトムが上に移動しますすべきだ。それが常に正しい方向に向くようにするにはどうすればいいですか？

jsfiddle

.button { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    width: 215px; 
 
    height: 55px; 
 
    color: white; 
 
    font-family: $arial; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35); 
 
    letter-spacing: .1em; 
 
    border-radius: 3px; 
 
    position: relative; 
 
    background: #009ee0; 
 
    border: 1px solid #148fc6; 
 
    border-bottom: 4px solid #148fc6; 
 
} 
 
.button:hover { 
 
    border-bottom: 1px; 
 
    height: 53px; 
 
} 
 
.button span { 
 
    position: absolute; 
 
    width: 90%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    top: 50%; 
 
    transform: translateY(-43%); 
 
    line-height: 1.2; 
 
} 
 
div { 
 
    padding: 20px 5px; 
 
}

<div> 
 
    <a href="#" class="button"> 
 
    <span>Wrong way</span> 
 
    </a> 
 
</div> 
 

 
<div> 
 
    <a href="#" class="button"> 
 
    <span>I work fine</span> 
 
    </a> 
 
    <a href="#" class="button"> 
 
    <span>I work fine</span> 
 
    </a> 
 
</div>

Answer 1

あなたは55×53pxからの高さを低くしています。 2pxはどこかに行く必要があります。一番上のボタンはちょうどそれを崩壊させています。 （下の2つは同じことをしていますが、縦のテキストの配置の影響を受けているため、そのように見えません）。あなたのホバールールをこれに変更して、高さの損失に対応します。

.button:hover { 
    border-bottom: 1px; 
    margin-top: 2px; 
    height: 53px; 
} 

https://jsfiddle.net/exd6hhvz/

Answer 2

私はそれがmargin-top: 2px;.button:hoverへ

を追加することにより、一貫して動作させることができました。ここの例です：https://jsfiddle.net/vf03czp5/