» »

Мигающая кнопка при помощи 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.12.2017 Просмотров: 296 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 05.01.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; }
}


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