Для привлечение внимание, это мегающиеся кнопка отлично подойдет как вариант, где после установке в заданном режиме начнет работать. В этой статье показано, как создать кнопку с мигающим эффектом, используя анимацию в CSS3 без JavaScript. Речь идет о создание и разработки потрясающие и привлекательных кнопок, которые используют анимацию CSS, чтобы придать им все это радиоактивное ощущение. Где как на светлом или на темном фоне смотрится отменно, так как основном все зависит от палитры цвета.
Анимация для этой кнопки использует ключевые кадры в CSS3. В этой части стилей анимация состоит из трех ключевых кадров. Каждый ключевой кадр определяет новые значения для свойств CSS background-color и box-shadow. Они выполняют постепенный контроль анимации, которая не может быть выполнена с использованием свойства CSS перехода.
Вот список ключевых кадров в стилях для анимации:
1. Исходной точкой является ключевой кадр 0%, который определяет синий цвет фона и синий цвет тени вокруг кнопки с размытым расстоянием 3 пикселя.
2. Средняя точка - ключевой кадр 50%, который определяет светло-голубой цвет фона и светло-голубой цвет тени вокруг кнопки с размытым расстоянием 10 пикселей.
3. Конечная точка - ключевой кадр 100%, который определяется так же, как ключевой кадр 0%.
Анимация с тремя ключевыми кадрами, описанными выше, создает мерцающий или светящийся эффект для кнопки, которая повторяется бесконечно много раз.
Так реально смотрятся при проверки на работоспособность.
Так по умолчанию:
Здесь в работе:
Приступаем к установке:
HTML
1. Вариант:
Код
<a class="zaqukan" href="#">ZORNET.RU #1</a>
2. Вариант:
Код
<button type="submit" class="zaqukan">ZORNET.RU #2</button>
CSS
Код
.zaqukan {
border-radius: 5px;
border: none;
color: #fbf2f2;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 15px;
padding: 7px 12px;
text-align: center;
text-decoration: none;
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
0% { background-color: #0a78b5; -webkit-box-shadow: 0 0 3px #0a78b5; }
50% { background-color: #1096f1; -webkit-box-shadow: 0 0 40px #1096f1; }
100% { background-color: #0a78b5; -webkit-box-shadow: 0 0 3px #0a78b5; }
}
@-moz-keyframes glowing {
0% { background-color: #0a78b5; -moz-box-shadow: 0 0 3px #0a78b5; }
50% { background-color: #1096f1; -moz-box-shadow: 0 0 40px #1096f1; }
100% { background-color: #0a78b5; -moz-box-shadow: 0 0 3px #0a78b5; }
}
@-o-keyframes glowing {
0% { background-color: #0a78b5; box-shadow: 0 0 3px #0a78b5; }
50% { background-color: #1096f1; box-shadow: 0 0 40px #1096f1; }
100% { background-color: #0a78b5; box-shadow: 0 0 3px #0a78b5; }
}
@keyframes glowing {
0% { background-color: #0a78b5; box-shadow: 0 0 3px #0a78b5; }
50% { background-color: #1096f1; box-shadow: 0 0 40px #1096f1; }
100% { background-color: #0a78b5; box-shadow: 0 0 3px #0a78b5; }
}
В приведенных выше стилях может быть меньше кода, если мы удалим стили CSS с префиксами поставщиков, которые используются для более старых версий браузеров
В самой стилистики можно изменить цвет кнопки и выставить тот оттенок, что вам нужен. Вам нужно поменять только 2 значение, это сама основа и тень, что идет под заданным цветом.
1. #1096f1
2. #0a78b5
Демонстрация
