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

Эффект неонового свечение кнопки на CSS

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

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

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

Рассмотрим продолжительный эффект, где изначально идет по умолчанию.

Нейлоновая кнопка для сайта

Здесь наведен курсор и сразу по всем сторонам пошла дискотека с гаммой цвета.

Красивая кнопка на сайт

Это заключительный эффект, который остается после наведение курсора:

Кнопка с эффектом неона

HTML

Код
<button class="senviron-iding-micad" type="button">Эффект неонового текста с помощью CSS</button>

CSS

Код
.senviron-iding-micad {
  width: 315px;
  height: 48px;
  border: none;
  outline: none;
  color: #f7f3f3;
  background: #232121;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 7px;
}

.senviron-iding-micad:before {
  content: '';
  background: linear-gradient(45deg, #e41717, #e67111, #efeb08, #4ff30f, #12f1cc, #0f35ef, #7c13ef, #ef13bf, #de0d0d);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.senviron-iding-micad:active {
  color: #141415;
}

.senviron-iding-micad:active:after {
  background: transparent;
}

.senviron-iding-micad:hover:before {
  opacity: 1;
}

.senviron-iding-micad:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2b2a2a;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

Затем цвета добавляют еще один творческий штрих, когда они меняют градиент, создавая почти успокаивающий ритм. При нажатии вся кнопка подсвечивается той же цветовой палитрой в том же ритме.

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

Демонстрация
06 Июня 2019 Загрузок: 4 Просмотров: 6070 Комментариев: (2)
Поделиться в социальных сетях

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

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

Комментарии: 2
Kosten
Kosten 07 Июня 2019 03:311
0
Свойство CSS3 text-shadow чрезвычайно полезно для создания множества различных текстовых эффектов, самый крутой из которых, вероятно, является эффектом, где текст выглядит как светящийся. В сочетании с некоторыми яркими цветами, применяемыми к тени текста, эффект свечения становится эффектом неонового свечения.



Как создать светящийся неоновый текст с помощью CSS3

HTML

Код
<h1 class="glow">ZorNet.Ru — сайт для вебмастера</h1>


CSS

Код
.glow{
  color: #f5f5f5;
  font-size: 80px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow{
  from{
  text-shadow: 0 0 10px #f5f5f5,
  0 0 20px #f5f5f5,
  0 0 30px #e60073,
  0 0 40px #e60073,
  0 0 50px #e60073,
  0 0 60px #e60073,
  0 0 70px #e60073;
  }
  to {
  text-shadow: 0 0 20px #f5f5f5,
  0 0 30px #ff4da6,
  0 0 40px #ff4da6,
  0 0 50px #ff4da6,
  0 0 60px #ff4da6,
  0 0 70px #ff4da6,
  0 0 80px #ff4da6;
  }
}
.yt{
  color:#fff;
  font-size:30px;
  
}


Демонстрация
Kosten
Kosten 07 Июня 2019 03:392
0
Теперь мы собираемся стилизовать класс, который применяется ко всем заголовкам. Мы собираемся указать семейство шрифтов, которое мы будем использовать для наших заголовков. Также выровняем текст по центру, преобразуем его в верхний регистр, установим размер шрифта на 8em, изменим его цвет на белый. Теперь, когда мы разработали общий неоновый текст, мы собираемся добавить цвета для каждого заголовка в отдельности.



HTML

Код
<div class="container">
  <p class="neon"><a href="#">
  ZorNet.Ru
  </a></p>
</div>

CSS

Код
.neon {
  text-align: center;
  font-size: 7em;
  margin: 20px 0 20px 0;
}

.neon a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
.neon:nth-child(1) a {
  color: #BA01FF;
  font-family: Vampiro One;
}

.neon:nth-child(1) a:hover {
  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  animation: neon6 1.5s ease-in-out infinite alternate;
}

.neon a:hover {
  color: #ffffff;
}
@keyframes neon6 {
  from {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}
@media (max-width: 650px) {
  #container {
  width: 100%;
  }
  .neon {
  font-size: 3.5em;
  }
}


Демонстрация
Войдите:
avatar