如何无需复杂脚本实现HTML按钮的hover动画？

你的问题出在两点：一是Google按钮的class属性重复定义（同一个元素写了两次class），二是hvr-grow类没有对应的CSS样式，所以hover动画没效果。用纯CSS就能轻松解决，下面给你两种实用方案：

方案1：基础背景+边框变色动画 #

给按钮添加过渡动画，鼠标悬停时改变背景色和边框色，视觉反馈清晰：

.tabbuttons {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}

.tabbutton {
  border-radius: 30px;
  font-size: 18px;
  color: var(--light-text);
  margin: 10px;
  border: 1px solid #5f6368;
  background: transparent;
  padding: 14px 18px;
  cursor: pointer;
  /* 添加过渡动画，让变化更平滑 */
  transition: all 0.3s ease;
}

/* 鼠标悬停时的样式 */
.tabbutton:hover {
  background-color: rgba(95, 99, 104, 0.2);
  border-color: #8ab4f8;
}

方案2：缩放动画（类似你尝试的hvr-grow） #

如果想要缩放效果，只需要在hover时添加transform: scale()属性：

.tabbuttons {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}

.tabbutton {
  border-radius: 30px;
  font-size: 18px;
  color: var(--light-text);
  margin: 10px;
  border: 1px solid #5f6368;
  background: transparent;
  padding: 14px 18px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.tabbutton:hover {
  transform: scale(1.05); /* 鼠标悬停时放大1.05倍 */
  border-color: #8ab4f8;
}

修正后的HTML代码 #

注意要把重复的class属性合并（原来的Google按钮写法属于无效语法）：

<div class="tabbuttons">
  <div class="tabbutton" id="google" onclick="setsearch('Google')">Google</div>
  <div class="tabbutton" id="duckduckgo" onclick="setsearch('DuckDuckGo')">DuckDuckGo</div>
  <div class="tabbutton" id="bing" onclick="setsearch('Bing')">Bing</div>
  <div class="tabbutton" id="brave" onclick="setsearch('Brave')">Brave</div>
</div>

两种方案都不需要额外脚本，直接修改CSS就能实现平滑的hover动画，按钮原有功能不受影响。

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