转换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;   
}