Vurgulu görünümde div yüksekliği değiştirilirken kısaltılan denetim tarafı

Question

Düğmeler için bu vurgulu efekti kullanıyorum, ancak yükseklik değiştiğinde birkaç durumda üst kısım aynı kalıyor ve altta tam tersi değil meli. Her zaman doğru yönde gittiğinden nasıl emin olabilirim?

.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

jsfiddle Sen 53px için 55p gelen yüksekliğini azaltarak ediyoruz. Bu 2px'in bir yere gitmesi gerekiyor. Üst düğme sadece onu daraltıyor. (En alttaki ikisi aynı şeyi yapıyor, sadece dikey metin hizalamasından etkilendikleri için böyle görünmüyor). Boy kaybını karşılamak için vurgulu kuralınızı buna göre değiştirin. https://jsfiddle.net/vf03czp5/

Answer 2

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

Ben .button:hover İşte

için margin-top: 2px; ekleyerek sürekli çalışmasını sağlamak başardı bir örnek ?