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;
}

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

Демонстрация:
2017-12-30 Просмотров: 8706 Комментарий: (14)

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

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

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

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

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

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