ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект свечения при наведении на HTML и CSS

Эффект свечения при наведении на HTML и CSS

Эффект свечения при наведении на HTML и CSS
Вашему вниманию оригинально красочный эффект свечения при наведении курсора с использованием HTML и CSS, что стильно смотрится заданный дизайн. В этой теме подробно описано, как создать эффект яркого свечения при наведении курсора, используя только HTML и CSS. Как вы можете видеть на представленном изображении, это два объекта, где как раз подключен этот эффект, который идет на разноцветного свечения.

Что таким же образом можно самостоятельно подключить под разные элементы, где вам нужно видеть такой яркий эффект, это от разного строение, до простой кнопки. Как уже можно понять, что изначально эти кнопки находятся на начальной стадии, когда на них нет эффектов свечения. Но когда вы наведете на него курсор, он начнет светиться на заднем плане, что отлично смотрится на темном фоне, а также на светлом, где просто стилистику цвета подгоняем под свой стиль сайта.

При проверки по корректной работе:

CSS3: светящийся фон при наведении кнопки

Установка:

HTML

Код
<div class="kentrovos">
  <div class="adekopas knopas">
  <button>ZORNET.RU</button>
  <span></span>
  <span></span>
  </div>
<div class="adekopas cumerence">
  <button>ZORNET.RU #2</button>
  <span></span>
  <span></span>
  </div>
</div>

CSS

Код
.kentrovos{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.adekopas{
  position: relative;
  margin: 0 50px;
  background: #111;
}
.knopas{
  height: 68px;
  width: 218px;
  border-radius: 50px;
}
.cumerence{
  height: 196px;
  width: 196px;
  border-radius: 50%;
}
.adekopas button, .adekopas span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.adekopas button{
  background: #252424;
  color: #eceaea;
  outline: none;
  border: none;
  font-size: 20px;
  z-index: 9;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.knopas button{
  height: 58px;
  width: 208px;
  border-radius: 50px;
}
.cumerence button{
  height: 176px;
  width: 176px;
  border-radius: 50%;
}
.adekopas span{
  height: 100%;
  width: 100%;
  background: inherit;
}
.knopas span{
  border-radius: 50px;
}
.cumerence span{
  border-radius: 50%;
}
.adekopas:hover span:nth-child(1){
  filter: blur(7px);
}
.adekopas:hover span:nth-child(2){
  filter: blur(14px);
}
.adekopas:hover{
  background: linear-gradient(#11ecd8, #efd80e, #ec0dd1);
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  0%{
  filter: hue-rotate(0deg);
  }
  100%{
  filter: hue-rotate(360deg);
  }
}
@media (max-width: 640px){
  .kentrovos{
  flex-wrap: wrap;
  flex-direction: column;
  }
  .adekopas{
  margin: 50px 0;
  }
}

Надеюсь, вам понравился этот эффект свечения и вы поняли основные коды и концепции. Если вы новичок и у вас есть базовые знания HTML и CSS, вы также можете создать этот тип анимации.

Демонстрация
28 Марта 2021 Загрузок: 5 Просмотров: 3151 Комментариев: (4)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 4
burdinevgeny
burdinevgeny 30 Марта 2021 13:411
0
Привет подскажи а как сделать так, чтобы эффект был не при не наведении на кнопку, а постоянно?
Kosten
Kosten 30 Марта 2021 18:032
+1
Можно немного изменить, где по умолчанию станет оттенок, но при наведении немного расплываться.

Код
<div class="kentrovos">
  <div class="adekopas knopas">
  <button>ZORNET.RU</button>
  <span></span>
  <span></span>
  </div>
<div class="adekopas cumerence">
  <button>ZORNET.RU #2</button>
  <span></span>
  <span></span>
  </div>
</div>


CSS

Код
.kentrovos{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.adekopas{
  position: relative;
  margin: 0 50px;
  background: #111;
  background: linear-gradient(#11ecd8, #efd80e, #ec0dd1);
  animation: rotate 1.5s linear infinite;
}
.knopas{
  height: 68px;
  width: 218px;
  border-radius: 50px;
}
.cumerence{
  height: 196px;
  width: 196px;
  border-radius: 50%;
}
.adekopas button, .adekopas span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.adekopas button{
  background: #252424;
  color: #eceaea;
  outline: none;
  border: none;
  font-size: 20px;
  z-index: 9;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.knopas button{
  height: 58px;
  width: 208px;
  border-radius: 50px;
}
.cumerence button{
  height: 176px;
  width: 176px;
  border-radius: 50%;
}
.adekopas span{
  height: 100%;
  width: 100%;
  background: inherit;
}
.knopas span{
  border-radius: 50px;
}
.cumerence span{
  border-radius: 50%;
}
.adekopas:hover span:nth-child(1){
  filter: blur(7px);
}
.adekopas:hover span:nth-child(2){
  filter: blur(14px);
}

@keyframes rotate {
  0%{
  filter: hue-rotate(0deg);
  }
  100%{
  filter: hue-rotate(360deg);
  }
}
@media (max-width: 640px){
  .kentrovos{
  flex-wrap: wrap;
  flex-direction: column;
  }
  .adekopas{
  margin: 50px 0;
  }
}


Если только, чтоб разноцветные полосы только были, но в CSS убираем.

Код
.adekopas:hover span:nth-child(1){
  filter: blur(7px);
}
.adekopas:hover span:nth-child(2){
  filter: blur(14px);


Думаю со стилей вы всегда убрать успеете, сначала такой формат попробуйте, что выше приведен. Ведь и цвета остаются, а также идет обмен цветовой гаммы.

-SAM-
-SAM- 31 Марта 2021 01:503
+1
Обычно, где идёт .adekopas:hover -> поубирать привязку :hover.
burdinevgeny
burdinevgeny 31 Марта 2021 07:504
0
Спасибо за варианты, щас затестим 11a
Войдите:
avatar