Я хочу создать размытую кнопку и не размыть ее при наведении - PullRequest
Новая
       44

Я хочу создать размытую кнопку и не размыть ее при наведении

0 голосов
/ 23 марта 2019

Я пытаюсь создать кнопку с размытым нормальным состоянием.При наведении курсора кнопка должна не размыться.У меня есть две проблемы здесь:

  1. Копия размыта и я не хочу.Я хочу, чтобы фон кнопок был размытым.

  2. Размытие срезано внизу кнопки.

Здесь вынайти тест, который я уже пробовал:

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>

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Я нашел решение!

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);
}
0 голосов
/ 23 марта 2019

Удалить переполнение: скрыто от * ... 

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