Beaver Builder页面构建器中HTML按钮悬停默认样式显现问题求助

问题根源是Beaver Builder自带的全局按钮样式优先级高于你的内嵌CSS，导致悬停时默认样式（如边框、阴影、背景）覆盖了自定义下划线动画效果。以下是具体解决方案：

核心修改思路 #

1. 给按钮添加自定义类名，提升CSS选择器优先级，避免和全局样式冲突
2. 显式重置按钮所有交互状态的默认样式，防止浏览器或Builder自带样式透出
3. 优化过渡动画的精准性，确保下划线效果正常生效

修改后的代码 #

HTML代码

<button class="custom-hover-btn">
  HOVER ME
</button>

CSS代码

/* 自定义按钮基础样式，类选择器优先级更高 */
.custom-hover-btn {
  color: #2e276d;
  text-decoration: none;
  font-size: 20px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  /* 重置浏览器默认的聚焦/点击样式 */
  outline: none;
  box-shadow: none;
  cursor: pointer;
  padding: 0; /* 移除默认内边距，避免影响下划线位置 */
}

.custom-hover-btn::before {
  margin-left: auto;
}

.custom-hover-btn::after,
.custom-hover-btn::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  transition: width 0.5s ease; /* 明确过渡属性，避免不必要的动画 */
}

.custom-hover-btn:hover::after, 
.custom-hover-btn:hover::before {
  width: 100%;
}

/* 强制覆盖Beaver Builder可能的默认交互样式 */
.custom-hover-btn:hover,
.custom-hover-btn:focus,
.custom-hover-btn:active {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: #2e276d;
}

关键修改说明 #

• 用.custom-hover-btn类选择器替代全局button选择器，优先级更高，能直接覆盖Builder的默认样式
• 添加outline: none; box-shadow: none;彻底清除聚焦、点击时的默认边框和阴影
• 明确过渡属性为width，让下划线动画更稳定
• 覆盖:hover/:focus/:active所有状态的默认样式，确保自定义效果完全生效

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