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

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

* {
  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);
}

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

2 个答案: