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

Мигающая кнопка при помощи CSS

Мигающая кнопка при помощи CSS
Отличное предложение при входе на сайт привлечь мигающей кнопкой, которая установлена под ссылку на переход на важную тему или другое. Здесь она не будет дергаться, чтоб напрягая на чистых CSS, где веб мастер сам задает мигание и безусловно оттенок цвета. Также на ней можно прописать ключевое слово, чтоб изначально понять, куда можно перейти.

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

В этой статье показано, как создать с эффектом, используя CSS3 без JavaScript.

Приведенные ниже стили применяются к элементам с клавишей класса. Эти стили могут применяться в основном для ссылок и кнопок в HTML.

HTML

Код
<a class="lakub_derza_timan" href="http://zornet.ru/">Нажмите меня!</a>
<button type="submit" class="lakub_derza_timan">ZORNET.RU</button>

CSS

Код
.lakub_derza_timan {
  background-color: #1a4463;
  -webkit-border-radius: 7px;
  border-radius: 43px;
  border: none;
  color: #e4e2e2;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 17px;
  padding: 4px 9px;
  text-align: center;
  text-decoration: none;
}

@keyframes glowing {
  0% { background-color: #054775; box-shadow: 0 0 2px #074673; }
  50% { background-color: #1082d4; box-shadow: 0 0 9px #0e87de; }
  100% { background-color: #074b7b; box-shadow: 0 0 2px #094d7d; }
}

.lakub_derza_timan {
  animation: glowing 1500ms infinite;
}

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

Демонстрация:
30 Декабря 2017 Просмотров: 12471 Комментариев: (14)
Поделиться в социальных сетях

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

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

Комментарии: 14
Kosten
Kosten 05 Января 2018 18:211
0
Очередная мигающие кнопка, что от этой отличается тем, что здесь сама основа будет мигать, а не тень.Что вы сами можете поменять оттенок цвета и создать форму, что не удивлюсь, кто то поставить шрифтовые иконки, также DEMO на материал предоставлено.

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

Затем мы определяем наш ключевой кадр от 0 до 100%, используя функцию непрозрачности, чтобы уменьшить уровень прозрачности. В самой анимации мы указываем, какова будет продолжительность анимации, и мы хотим, чтобы анимация зацикливалась бесконечно.

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

HTML

Код
<button type="button" class="atumil_zornegam">САЙТ: ZORNET.RU</button>


CSS

Код
.atumil_zornegam {
   background: #14226b;
   padding: 7px 12px;
   color: #f7f1f1;
   border: none;
   border-radius: 3px;
   animation-name: flash;
   animation-duration: 1s;
   animation-timing-function: cubic-bezier(0, 0, 0.7, 0.94);
   animation-iteration-count: infinite;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: cubic-bezier(0, 0, 0.68, 0.99);
   -webkit-animation-iteration-count: infinite;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;
}

@keyframes flash {   
   0% { opacity: 1.0; }
   50% { opacity: 0.5; }
   100% { opacity: 1.0; }
}

//Firefox 1+
@-webkit-keyframes flash {   
   0% { opacity: 1.0; }
   50% { opacity: 0.5; }
   100% { opacity: 1.0; }
}

//Safari 3-4
@-moz-keyframes flash {   
   0% { opacity: 1.0; }
   50% { opacity: 0.5; }
   100% { opacity: 1.0; }
}


Демонстрация:
vitali-l
vitali-l 24 Октября 2018 11:222
0
thank you very much! Well done!
Kosten
Kosten 24 Октября 2018 12:023
0
Отлично, что все сработало, где можете самостоятельно теперь выстроить как вам нужно.
noavatar
fedotovatl 10 Августа 2020 17:014
0
Я не разбираюсь в сайтостроении, но у меня есть сайт и там кнопка. Очень хочется сделать ее мигающей, как это сделать не понимаю.Можете разъяснить по шагово??... 50a
Kosten
Kosten 10 Августа 2020 19:135
0
Вам нужно стили прописать в CSS сайта, и также поставить класс class="atumil_zornegam в сам код кнопки.
Kosten
Kosten 10 Августа 2020 19:266
0
Если пошаговый формат, то ставим код по месту, где хотите видеть кнопку, далее прописать стили в CSS. Если не чего не появится, то просто в браузере почистить историю, если браузер на хромиум движке, то обязательно чистить историю.
noavatar
fedotovatl 12 Августа 2020 15:417
0
Спасибо, буду пробовать..
noavatar
fedotovatl 12 Августа 2020 15:488
0
У меня в стилях вот это https://prnt.sc/tydc9o в каком из них прописать... 07a
Kosten
Kosten 12 Августа 2020 17:3910
0
Но какие у вас главные стили на дизайн идут, вот там попробуйте прописать.

Также если можете скиньте ссылку на свой сайт.
noavatar
fedotovatl 12 Августа 2020 16:269
0
Я могу здесь https://prnt.sc/tye2ym прописать стили?? А ТАК ЖЕ КОД?? Это я вошел в "иследовать код"..
noavatar
fedotovatl 13 Августа 2020 05:5111
0
На сайте: vcezarabotoki.ru
Kosten
Kosten 13 Августа 2020 06:3712
0
А где вы решили устанавливать кнопку, то там папка под стили сделана, хотя с такой стилистикой в первые дело имею, но должна быть главная папка под основную стилистику.

Как понимаю, что здесь можно самостоятельно создать парку под стили, можно опробовать, и прописывать туда CSS под устанавливаемые элементы.
-SAM-
-SAM- 15 Августа 2020 02:0214
0
Можете дописать стили в файл /style/styleokn_superoc.css
1 2 »
Войдите:
avatar