轉換scaleY使邊框底部出現

Question

我有這個按鈕，我想使它看起來像一個以前訪問過的鏈接。爲了使我需要應用一個縮放變換，但是當我這樣做時，會出現一個看起來不太好的邊框。

This is my jsfiddle

#contact button { 
    padding: 6px 12px; 
    margin-top: 20px; 
    position: relative; 
    border: 1px solid #387d89; 
    font-size: 9.84px; 
    text-transform: uppercase; 
    color: #fff; 
    background: #245963; 
    /*-webkit-transform: scaleY(1.1); 
    -moz-transform: scaleY(1.1); 
    -ms-transform: scaleY(1.1); 
    -o-transform: scaleY(1.1); 
    transform: scaleY(1.1);*/ 
} 

我註釋掉，做縮放的CSS，這正是我需要的，但不出現#contact按鈕的邊框底部申請。

我希望你能明白我需要什麼..謝謝！

Answer 1

添加提綱：無;到這個規則#contact按鈕。

#contact button { 
    padding: 6px 12px; 
    margin-top: 20px; 
    position: relative; 
    border: 1px solid #387d89; 
    font-size: 9.84px; 
    text-transform: uppercase; 
    color: #fff; 
    background: #245963; 

    -webkit-transform: scaleY(1.1); 
    -moz-transform: scaleY(1.1); 
    -ms-transform: scaleY(1.1); 
    -o-transform: scaleY(1.1); 
    transform: scaleY(1.1); 

    /* outile */ 
    outline: none;   
}