Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create flashing/glowing button using animation in CSS3

How to create flashing/glowing button using animation in CSS3

How to create flashing/glowing button using animation in CSS3
 
How to create flashing/glowing button using animation in CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article shows how to create a button with flashing/glowing effect using animation in CSS3 without JavaScript.

The styles below are applied to elements with class "button". These styles can be mainly applied for links and buttons in HTML.

Here is HTML code of a link and button:

<a class="button" href="#">Click me!</a>
<button type="submit" class="button">Click me!</button>

The following portion of CSS styles forms the appearance of the button:

.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

The next portion of the CSS styles shown below adds animation to the button.

Animation for this button uses keyframes in CSS3. In this portion of styles, animation consists of three keyframes. Each keyframe defines new values for CSS properties background-color and box-shadow. They perform gradual control of animation which can't be accomplished using transition CSS property.

Here is a list of keyframes in the styles for animation:

  1. Starting point is keyframe 0% which defines blue color of background and blue color of shadow around the button with blur distance 3 pixels.
  2. Middle point is keyframe 50% which defines light blue color of background and light blue color of shadow around the button with blur distance 10 pixels.
  3. Ending point is keyframe 100% which is defined the same way as keyframe 0%.

The animation with three keyframes described above creates flashing/glowing effect for the button which is repeated infinite amount of times.

Here are CSS styles for animation:

@-webkit-keyframes glowing {
  0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }
}

@-moz-keyframes glowing {
  0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }
}

@-o-keyframes glowing {
  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
}

@keyframes glowing {
  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
}

.button {
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

Live demo

The styles above can have less code if we remove CSS styles with vendor prefixes which are used for older versions of browsers. So, without vendor prefixes they look the following way:

@keyframes glowing {
  0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
  50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
  100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
}

.button {
  animation: glowing 1500ms infinite;
}

If you need more explanations about animation above, just read the following article: Animation in CSS3.

Animation in the styles above changes color of the button and its shadow from blue to light blue and then these styles loop the animation. If you want to change colors for the button, just find and replace the following parts of code with new colors:

  1. #004A7F#7F006E
  2. #0094FF#FF00DC

Live demo


 

Read also

Animated 3D button using only CSS3

Animated 3D button using only CSS3

Animation in CSS3

Animation in CSS3

Discussion (total 20 comments)

Tik.
September 28, 2015 at 09:28 pm
Thanks a lot for making this tutorial and for including live examples.
megorLads
January 15, 2017 at 03:30 pm
Срочно требуются рабочие. Обработка зказов на дому.

Без вложений, на системе автоматического приёма и обработки заказов.

Более подробно >> obrabotka.zarplatt.ru <<
narinaLads
January 16, 2017 at 02:06 am
Предлагаем Вам возможность работы (подработки) в интернете, выбирайте самостоятельно более чем из ста проверенных вариантов заработка наиболее удобный и близкий для Вас.
Все подробности у нас на сайте. >> zarplatt(точка)ru <<
tegorLads
January 16, 2017 at 12:53 pm
Простейшая методика заработка от Ольги Арининой

С запуска одной системы вы будете получать доход 2800 рублей в день.
Запустите 2 системы и ваш доход - 5600 руб в день!

Все подробности у нас на сайте. >> robot.zarplatt.ru <<

Первый доход вы гарантированно получите
уже в течение 24 часов после запуска системы!
regorLads
January 17, 2017 at 05:18 pm
Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline-online»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами до 11 000 руб.

Работая в нашей компании Вы получаете:

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

Пройдите регистрацию на нашем сайте. > airline.zarplatt(точка)ru <

Без вложений, опыт и профессиональные навыки не требуются!
rpavelLads
January 17, 2017 at 06:55 pm
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.like.zarplatt.ru <
tegorLads
January 20, 2017 at 07:56 am
Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline-online»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами от 11 000 руб.

Работая в нашей компании Вы получаете:

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

Пройдите регистрацию у нас на сайте. ( airline.zarplatt.ru )

Без вложений, опыт и профессиональные навыки не требуются!
vpavelLads
January 22, 2017 at 07:03 am
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > like.zarplatt.ru <

Вывод заработанных средств ежедневно в течении нескольких минут.
qpavelLads
January 25, 2017 at 09:42 am
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.like.zarplatt.ru <
qnikaLads
January 27, 2017 at 11:34 am
Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Ознакомтесь с условиями у нас на сайте. ( http://prosto.zarplatt.ru/ )
qegorLads
January 27, 2017 at 07:15 pm
Высокооплачиваемая работа или подработка в домашних условиях.
Мы предлагаем: Достойная зарплата без задержек, справка 2-НДФЛ, карьерный рост, бесплатное обучение,
свободный график, страховые взносы в Пенсионный фонд, официальный договор (по желанию).
График Вашей работы, устанавливаете самостоятельно, в пределах Ваших возможностей.
Ваш возраст и образование значения не имеют.
Обязательные условия: наличие компьютера и интернета.
Ваши действия:
1. На сайте ( www.off-rabota.tk ) скачайте и установите приложение.
2. Ознакомьтесь с содержимым.
3. Пройдите несложную регистрацию.
4. Обязательно, пройдите курсы обучения. (Бесплатно)
5. Начинайте зарабатывать!
Зарплату мы перечисляем только на банковскую карту любой платёжной системы.
(Для работы советуем оформить отдельную карту)
ВНИМАНИЕ! Весь процесс регистрации, обучения совершенно бесплатны. Не попадитесь в руки мошенников!

-----JGHHJ16FU16G1U6F51J6F1J6R1UY6F5Y-----
vianaLads
January 28, 2017 at 01:58 pm
МoneyМaker - это программа, которая рассылает сообщения с предложениями о покупке по
Вашей реферальной ссылке более чем 50 миллионам человек в сутки на русском и английском языках.

Таким образом Вы получаете огромный целевой трафик и хорошие партнерские отчисления с CPA сети
( в среднем 600 рублей в час) как на видео на нашем сайте. ( robot.zarplatt.ru ).
Выплаты с данной CPA сети моментальные и автоматические.
Поэтому с помощью моей программы Вы получаете Авто-заработок 600 рублей в час.

МoneyМaker - работает с несколькими зарубежными и русскоязычными площадками,
количество просмотров которых в неделю суммарно достигает более 700 миллионов человек.
spavelLads
January 29, 2017 at 09:45 am
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > like.zarplatt.ru <

Вывод заработанных средств ежедневно в течении нескольких минут.
regorLads
January 31, 2017 at 09:58 am
Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline-online»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами от 11 000 руб.

Работая в нашей компании Вы получаете:

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

Пройдите регистрацию на нашем сайте. ( airline.zarplatt.ru )

Без вложений, опыт и профессиональные навыки не требуются!
Winstonirold
February 04, 2017 at 11:46 pm
thanks due to the fact that this countless illuminating website, finance up the momentous work check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers
Winstonirold
February 06, 2017 at 07:48 pm
thanks for this countless revealing website, finance up the great position check out this <a href=http://onlinecasinos-x.com>casino</a> offers
Jasonrocky
February 08, 2017 at 08:30 pm
agree to this <a href=http://onlinecasino-xx.com>casino</a> where you can conquer legal funds with the avoid of this enchiridionPlaying <a href=http://onlinecasinos-x.com/online-baccarat.html>baccarat</a>
Winstonirold
February 14, 2017 at 02:44 am
thanks towards this colossal informative website, obstruct up the momentous jobless check out this <a href=http://onlinecasinos-x.com>casino online</a> offers
snikaLads
February 16, 2017 at 04:40 pm
Пройдите 1 регистрацию, сделайте 2 действия
и получайте от 8950 рублей каждые сутки в автоматическом режиме.

Мы гарантируем:
- Первый заработок в течении 60 минут.
- Стабильный доход 24 часа в сутки.
- Поступление денег без задержек.
- Для России, стран СНГ и Европы.
- Без вложений и установки ПО.
- Специально для новичков и людей без опыта.

Более подробная информация у нас на сайте. ( http://prosto.zarplatt.ru/ )
mpavelLads
February 20, 2017 at 04:26 am
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > like.zarplatt.ru <

Вывод заработанных средств ежедневно в течении нескольких минут.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation