求助：制作带悬停放大效果且可跳转的图片按钮

直接用<a>标签实现即可，它原生支持跳转功能，同时通过CSS能完全定制成你需要的按钮样式，不用再纠结button的跳转问题。

修改后的代码如下：

HTML部分 #

<div class="offset-lg-1 col-lg-4">
  <a href="目标页面地址.html" class="grow-button1">Come Join in Class</a>
</div>

CSS部分 #

.grow-button1 {
  /* 将a标签转为行内块级元素，才能设置宽高 */
  display: inline-block;
  /* 移除a标签默认的下划线 */
  text-decoration: none;
  /* 保持按钮的光标样式 */
  cursor: pointer;
  /* 沿用你原button的样式 */
  font-size: 50px;
  padding: 16px 32px;
  color: #fff;
  transition: transform 0.2s ease-in-out;
  background-image: url('images/misclassphoto.jpg');
  height: 8em;
  width: 8em;
  /* 可选：移除默认边框，避免样式冲突 */
  border: none;
}

.grow-button1:hover {
  transform: scale(1.1);
}

关键说明 #

• 把原<button>替换成<a>，添加href属性指定跳转页面地址即可实现跳转。
• 给<a>设置display: inline-block是因为a标签默认是行内元素，无法直接控制宽高，转为行内块级后就能像button一样调整尺寸。
• 其余样式和你原代码完全一致，悬停放大效果不受影响，同时保留了跳转功能。

内容的提问来源于stack exchange，提问作者Mpeezie