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

Question

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

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

在这里你会找到一个我已经尝试过的测试：

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>

Answer 1

从 * 中删除 overflow:hidden...

* {
  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>

Answer 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);
}

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

I want to create a blurred button and un-blur it on hover

html

css

transition

button

css-filters