字体在悬停时产生另一种效果，即改变大小

Question

我创建了一个按钮，希望在其中转换其比例。但当我把鼠标悬停在按钮上时，它的字体在最后几秒钟会改变大小，这使它变大了一点。我该怎么办？

下方的代码

HTML:

<button>Generate password</button>

SCSS:

button{
background-color: #10B981;
color: white;
border-radius: 0.5em;
font-size: 1.1em;
padding: 0.6em;
margin-top: 3em;
border: none;
transition: transform 0.5s ease-in-out;

&:hover{
transform: scale(0.90);
}
}

Answer 1

您需要

button{
background-color: #10B981;
color: white;
border-radius: 0.5em;
font-size: 1.1em;
padding: 0.6em;
margin-top: 3em;
border: none;
transition: transform 0.5s ease-in-out;
}
button:hover{
transform: scale(0.9);
}

您可以查看：https://www.w3schools.com/howto/howto_css_zoom_hover.asp