如何使按钮随着鼠标悬停在按钮上而增大/缩小？

Question

在我的Web开发类的项目页面上，我有一些简单样式的按钮，我想知道是否有可能做到这一点，以便当用户的鼠标悬停在按钮上时，这些按钮做出反应。悬停时会增长，而鼠标移开时会收缩。我是Web开发的新手，因此不确定在HTML / CSS中是否可以做到这一点，或者不确定是否需要修改JavaScript。

Answer 1

CSS中有:hover选择器可以帮助您实现这一目标。如果您的按钮有某类，例如“ sendForm”，您可以执行以下操作：

.sendForm {
    width: 2rem; //or other units
}
.sendForm:hover {
    width: 4rem; // or other units
}

但是，我建议更改按钮上的填充大小，以使文本始终适合内部，例如：

.sendForm {
    display: inline-block;
    padding: 0 8px 0 8px; 
}
.sendForm:hover {
    padding: 0 16px 0 16px; 
}

您还可以使用简写形式：padding: 0 8px;如果您想了解有关CSS中的填充符号的更多信息，请参考MDn：https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Answer 2

非常简单。只需使用css并将鼠标悬停在按钮上

button:hover{

width:120px;
height:60px;
display:inline-block;
font-size:24px;
}

<button>click me</button>