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