html - 我的 CSS 按钮在悬停时出现了缩放()的图形问题

Question

我的 CSS 按钮有问题，看起来像是图形问题。当我悬停并将光标移出时，看起来就像按钮错误的边框，并在按钮周围创建一个幽灵边框。在 Chrome 中，它更明显，但在 Opera 中，就像发生了另一种错误。

我注意到当我拿出transition: 0.3s时该问题在 chrome 上已得到解决，但我仍然需要按钮以平滑的方式缩放。

这是一个 fiddle :

https://jsfiddle.net/573pxfgo/1/

:root{
    --cor1:#206197;
    --cor2: #35ab4a;
}
div{
  padding:100px;
}

.btn2{
    color:white;
    padding:15px 40px;
    border:2px solid white;
    background-color: var(--cor1);
    outline: none;
    transition: 0.3s;
    cursor:pointer;
}

.btn2:hover{
    background-color: var(--cor2);
    transform: scale(1.2);
}

<div>
  <button class="btn2"> Solicitar Orçamento</button>
</div>

Answer 1

所以我不确定为什么会发生这个错误，但修复它的解决方案是将轮廓设置为 1px 并使其透明。您还可以使用按钮的阴影来消除渲染错误。您可以在第 ~ 14 行看到我的更改。希望这有效!

:root{
    --cor1:#206197;
    --cor2: #35ab4a;
}
div{
  padding:100px;
}

.btn2{
    color:white;
    padding:15px 40px;
    border:2px solid white;
    background-color: var(--cor1);
    outline: 1px solid transparent;
    transition: 0.3s;
    cursor:pointer;
}

.btn2:hover{
    background-color: var(--cor2);
    transform : scale(1.2);
}

<div>
  <button class="btn2"> Solicitar Orçamento</button>
</div>