如何用CSS的:hover实现按钮放大？现有代码无效果求解

你的代码存在几个关键问题，导致悬停放大效果无法生效：

• CSS语法错误：#btn1的样式声明块缺少闭合的}，浏览器会忽略后续的:hover规则。
• 尺寸逻辑错误：按钮设置了固定的height和width，而:hover里的max-height/max-width无法覆盖固定尺寸，自然看不到变化。
• HTML结构不规范：button标签内嵌套a标签不符合HTML标准，建议调整跳转逻辑。

修复方案1：直接修改尺寸（会改变布局空间） #

先修正语法错误，同时替换max-height/max-width为直接设置height/width，再加过渡动画让效果更平滑：

<!-- 调整跳转逻辑，用button的点击事件实现跳转 -->
<button id="btn1" onclick="window.location.href='lisbon.html'">
  <img src="" alt="">Lisbon
</button>

#btn1 {
    height: 150px;
    width: 220px;
    position: absolute;
    left: 550px;
    top: 400px;
    background-image: url(Images/portugal-flag.jpg);
    background-size: cover;
    cursor: pointer;
    /* 添加过渡动画 */
    transition: all 0.3s ease;
    border: none;
    color: #fff; /* 可选：让文字更清晰 */
}

#btn1:hover {
    height: 200px;
    width: 250px;
}

修复方案2：用transform: scale()（推荐，不影响布局） #

这种方式不会改变元素占据的空间，动画更流畅，是实现悬停放大的常用方案：

<button id="btn1" onclick="window.location.href='lisbon.html'">
  <img src="" alt="">Lisbon
</button>

#btn1 {
    height: 150px;
    width: 220px;
    position: absolute;
    left: 550px;
    top: 400px;
    background-image: url(Images/portugal-flag.jpg);
    background-size: cover;
    cursor: pointer;
    /* 只针对缩放添加过渡 */
    transition: transform 0.3s ease;
    overflow: visible; /* 防止放大后内容被截断 */
    border: none;
    color: #fff;
}

#btn1:hover {
    transform: scale(1.2); /* 1.2表示放大1.2倍，可根据需求调整 */
}

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