Блог

Главная - Вопросы по программированию - Я хочу создать размытую кнопку и размыть ее при наведении

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

#html #css #button #transition #css-filters

#HTML #css #кнопка #переходный период #css-фильтры #переход

Вопрос:

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

  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>

Ответ №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>

Комментарии:

1. Текст на этом адресе не размыт?

2. @maxpelic Затем переместите диапазон из кнопки или добавьте другой div.background и размывайте его.

3. @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);
}