ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная светящаяся кнопка на CSS

Анимированная светящаяся кнопка на CSS

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

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

При открытие страницы:

Кнопка с красивым эффектом при наведение клика

При наведении курсора:

Установка:

HTML

Код

<a href="#">
 
 
 
 
 Скрипты сайта
 </a>
 <a href="#">
 
 
 
 
 Шаблоны на блог
 </a>
 <a href="#">
 
 
 
 
 Стиль кнопок
 </a>

CSS

Код

a {
  position: relative;
  display: inline-block;
  padding: 24px 28px;
  margin: 38px 0;
  color: #0fc7d0;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  margin-right: 46px;
}
a:hover {
  background: #0fe2ec;
  color: #070a03;
  box-shadow: 0 0 5px #0bdee8, 0 0 25px #0be2ec, 0 0 50px #0cdce6, 0 0 200px #0edee8;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
  a:nth-child(1) {
  filter: hue-rotate(270deg);
  }
  a:nth-child(2) {
  filter: hue-rotate(110deg);
  }
  a span {
  position: absolute;
  display: block;
  }
  a span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0%), #0be2ec);
  animation: animate1 1s linear infinite;
  }
  @keyframes animate1 {
  0% {
  left: -100%;
  }
  50%,
  100% {
  left: 100%;
  }
  }
  a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%), #09e6f1);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
  }
  @keyframes animate2 {
  0% {
  top: -100%;
  }
  50%,
  100% {
  top: 100%;
  }
  }
  a span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, rgb(0 0 0 / 0%), #0be6f1);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
  }
  @keyframes animate3 {
  0% {
  right: -100%;
  }
  50%,
  100% {
  right: 100%;
  }
  }

  a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, rgb(0 0 0 / 0%), #0bdee8);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
  }
  @keyframes animate4 {
  0% {
  bottom: -100%;
  }
  50%,
  100% {
  bottom: 100%;
  }
  }

Если вам идея понравилась, но имеете светлый дизайн интернет ресурса, то остается к закрепленным стилям сделать коррекцию по данному оттенку, что соответствует вашему основному дизайн сайта.

Демонстрация

04 Декабря 2020 Загрузок: 4 Просмотров: 1830 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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