嘿，我懂你的需求啦！你想要实现的效果是：网站上的透明按钮，平时按钮区域显示清晰的背景（虽然父容器是模糊的），鼠标悬停时仅按钮覆盖的背景区域变模糊，按钮本身的文字始终保持清晰，就像这张图展示的那样：

现在你遇到的问题是，按钮放在带模糊效果的.blured-background容器里，导致按钮也跟着被模糊了，想找一个简单的解决方案对吧？先看你给出的HTML结构：

<div class="blured-background">
  <div class="sign">
    <button class="sign-in">sign in</button>
    <button class="sign-up">sign up</button>
  </div> 
</div>

核心问题分析 #

如果你的.blured-background用的是filter: blur()来实现模糊，那容器里的所有子元素都会被这个模糊效果影响，这就是按钮变糊的根源！我们可以换个更合适的模糊方式，再给按钮单独设置悬停逻辑，就能轻松解决问题。

推荐解决方案（简单易实现） #

直接用backdrop-filter来实现容器和按钮的模糊效果，它只会让元素后面的背景模糊，不会影响元素自身的内容，完美适配你的需求：

/* 模糊背景容器 */
.blured-background {
  /* 基础布局样式，按需调整 */
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* 容器背景模糊，不影响内部元素 */
  backdrop-filter: blur(8px);
  /* 可选：加一层半透明底色，让模糊效果更自然 */
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 按钮容器布局 */
.sign {
  display: flex;
  gap: 15px;
}

/* 按钮基础样式 */
.sign button {
  border: 2px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* 确保文字始终在最上层，不被模糊覆盖 */
  z-index: 1;
}

/* 悬停时的按钮背景模糊效果 */
.sign button:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 仅让按钮覆盖的背景区域模糊 */
  backdrop-filter: blur(12px);
  /* 可选：加一层半透明底色增强视觉效果 */
  background-color: rgba(255, 255, 255, 0.2);
  /* 让模糊背景在文字下方 */
  z-index: -1;
}

方案说明 #

1. 容器模糊优化：把原来的filter: blur()换成backdrop-filter: blur()，这样容器的背景会模糊，但内部的按钮完全保持清晰，不会被父容器的模糊影响。
2. 按钮悬停逻辑：通过伪元素::before实现悬停时的模糊效果——平时伪元素不显示，悬停时用backdrop-filter让按钮覆盖的背景区域变模糊，同时伪元素层级低于按钮文字，确保文字始终清晰可见。
3. 兼容性提示：backdrop-filter在现代浏览器（Chrome、Firefox、Edge等）都支持，如果需要兼容旧版Safari，可以加上前缀-webkit-backdrop-filter。

如果你的项目有旧浏览器兼容需求，必须用filter: blur()的话，也可以把按钮设置为position: absolute脱离父容器的文档流，再单独给按钮添加悬停模糊的伪元素，但这种方式布局上会麻烦一些，优先推荐上面的backdrop-filter方案哦~

备注：内容来源于stack exchange，提问作者HOJ