我想创建一个模糊按钮并在悬停时取消模糊它答案

【问题标题】：I want to create a blurred button and un-blur it on hover我想创建一个模糊按钮并在悬停时取消模糊它
【发布时间】：2019-03-23 13:37:22
【问题描述】：

我正在尝试创建一个具有模糊正常状态的按钮。悬停时，按钮应该不模糊。我这里有两个问题：

副本也很模糊，这是我不想要的。我只希望按钮背景模糊。
按钮底部的模糊被切断。

您会在这里找到我已经尝试过的测试：

https://codepen.io/claudio_101/pen/GezJrR

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.blur button {
  position:relative;
  margin-top: 100px;
  margin-left: 50%;
  left: -50px;
  width: 100px;
  height: 48px;
  background-color: black;
  color: white;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.blur button span{
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.blur button:hover {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  -ms-transition: all .25s ease;
  transition: all .25s ease;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

<div class="blur">
  <button><span>Send</span></button>  
</div>

【问题讨论】：

标签： html css button transition css-filters

【解决方案1】：

删除溢出：从*隐藏...

* {
  margin: 0;
  padding: 0;
}

.blur button {
  position:relative;
  margin-top: 100px;
  margin-left: 50%;
  left: -50px;
  width: 100px;
  height: 48px;
  background-color: black;
  color: white;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.blur button span{
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.blur button:hover {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  -ms-transition: all .25s ease;
  transition: all .25s ease;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

<div class="blur">
  <button><span>Send</span></button>  
</div>

【讨论】：

这个地址没有文字模糊吗？
@maxpelic 然后将 Span 移出按钮，或者添加另一个 div.background 并模糊它。
@maxpelic 感谢反馈。用另一个背景再试一次，它有效，但似乎有点乱。现在，当我的光标超过跨度时，我失去了悬停。任何建议我如何解决这个问题。顺便说一句，对于新手的问题感到抱歉。干杯

【解决方案2】：

我找到了解决办法！

https://codepen.io/claudio_101/pen/pYGVxg

<button>
  <span class="copy">SEND</span>
  <span class="bg"></span>
</button>

body {
  margin: 0;
  padding: 10px;
  font-family:Arial;
  font-weight:bold;
}

button {
  width: 100px;
  height: 48px;
  border-radius: 24px;
  position:relative;
  padding: 0;
  border: none;
  cursor: pointer;
}

.copy {
  position: absolute;
  top:16px;
  left:34px;
  z-index:10;
  color: white;
}

.bg {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 24px;
  background-color: black;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

button:hover .bg {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

【讨论】：