Мигающая кнопка на css

Как сделать CSS-анимацию блика на кнопке

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

В статье рассмотрим несколько вариантов:

• Когда кнопка оформлена в виде ссылки или тега button.
• Когда кнопка оформлена в виде тега input с атрибутом submit. В том числе посмотрим как это реализовать при помощи javascript, чтобы даже, например, на каком-нибудь конструкторе лендингов у вас получилось внедрить этот эффект, когда нет физического доступа к html настройкам кнопки.

Повторяющаяся анимация блика

Сначала разберем простой случай, когда кнопка оформлена при помощи тега «button» или «a». На самом деле никакой сложности в реализации эффекта — нет. Суть заключается в том, чтобы дать кнопке «overflow: hidden» и «position: relative», а затем, внутри нее создать псевдоэлемент (сам блик) и зациклить его анимацию перемещения. Давайте займемся этим.

Для начала создадим кнопки в html сами кнопки.

А теперь добавим базовые стили в CSS.

Теперь давайте добавим сам блик. Как я уже говорил, делать его будем при помощи псевдоэлемента, а именно при помощи «after» c абсолютным позиционированием, но сначала давайте добавим нашим кнопкам «position» и «ovefflow».

Добавляем псевдоэлемент и свойства анимации:

.flare-button:after < content: ""; display: block; width: 20px; height: 200px; margin-left: 50px; background: #fff; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.5) 100% ); left: -40px; top: -100px; z-index: 1; transform: rotate(45deg); position: absolute; animation: movingFlare 3s ease-in-out 0.05s infinite; >@keyframes movingFlare < 0% < left: -30px; margin-left: 0px; >30% < left: 110%; margin-left: 80px; >100% < left: 110%; margin-left: 80px; >>

В результате получилось так.

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

• Толщина блика. Задается свойством «width». В моем случае это 20 пикселей.
• Наклон блика. Задается свойством transform. В моем случае 45 градусов.
• Свойства анимации. Задаются при помощи «annimation». Подробнее тут.

Анимация блика у тега input

Иногда кнопка для отправки формы обратной связи оформлены не тегом button, а при помощи тега input. В таком случае не получится воспользоваться способом, описанным выше, ведь у инпута невозможно задать псевдоэлемент «after» или «before». В таком случае можно просто обернуть его, например, в «div» и применить тот же подход, что и для элементов выше. Давайте займемся этим.

.flare-input < width: 100%; height: 50px; border: none; font-size: 16px; font-weight: bold; text-align: center; text-transform: uppercase; color: #fff; background: #eb9f11; padding: 3px 15px 0; cursor: pointer; text-decoration: none; >.flare-input__wrapper < width: 100%; max-width: 280px; height: 50px; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; border-radius: 3px; overflow: hidden; position: relative; box-shadow: 0 3px 3px #be8316; >.flare-input__wrapper:after < content: ""; display: block; width: 20px; height: 200px; margin-left: 50px; background: #fff; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.7) 100% ); left: -40px; top: -100px; z-index: 1; transform: rotate(45deg); position: absolute; animation: movingFlare 3s ease-in-out 0.05s infinite; >@keyframes movingFlare < 0% < left: -30px; margin-left: 0px; >30% < left: 110%; margin-left: 80px; >100% < left: 110%; margin-left: 80px; >>

В итоге у меня получись таких 3 кнопки.

Исходник кнопки с анимацией блика

Источник

Как создать мигающую/светящуюся кнопку с помощью анимации в CSS3

В этой статье мы покажем, как создать мигающую/светящуюся кнопку, используя только CSS. Здесь вам не нужно использовать JavaScript. Просто выполните следующие шаги и попробуйте примеры!

1. Создайте ссылку и кнопку.

Прежде всего создадим ссылку и кнопку в таком виде:

a href="#" >button">Click here!a> button type="submit" >button">Click here!button>

2. Добавьте оформление к кнопке.

Дальше необходимо указать внешний вид кнопки с помощью CSS свойств:

.button< background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 60px; border: none; color: #eeeeee; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; >

3. Добавьте анимацию к кнопке:

Нам нужны ключевые кадры, чтобы добавить анимацию. Анимация содержит три ключевых кадра. Каждый из них определяет новые значения для свойств background color и the box-shadow.

@keyframes glowing < 0% < background-color: #2ba805; box-shadow: 0 0 3px #2ba805; > 50% < background-color: #49e819; box-shadow: 0 0 10px #49e819; > 100% < background-color: #2ba805; box-shadow: 0 0 3px #2ba805; > >

Ключевые кадры в оформлении анимаций:

1. 0% — начальная точка, которая указывает зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 3 px.
2. 50% — средняя точка, которая указывает светло-зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 10 px.
3. 100% — конечная точка, которая указывается как 0%.

Давайте посмотрим результат!

Пример

html> html> head> title>Заголовок документа title> style> .button < background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 60px; border: none; color: #eeeeee; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; > @keyframes glowing < 0% < background-color: #2ba805; box-shadow: 0 0 5px #2ba805; > 50% < background-color: #49e819; box-shadow: 0 0 20px #49e819; > 100% < background-color: #2ba805; box-shadow: 0 0 5px #2ba805; > > .button < animation: glowing 1300ms infinite; > style> head> body> h2>Создайте мигающую/светящуюся кнопку h2> a class="button" href="#">Нажмите сюда! a> button type="submit" class="button">Нажмите сюда! button> body> html>

Пример

html> html> head> title>Заголовок документа title> style> body < margin: 0; > .wrapper < display: flex; height: 20vh; flex-direction: row; justify-content: center; align-items: center; > .button < border: 1px transparent; -webkit-border-radius: 40px; border-radius: 40px; color: #eeeeee; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 8px 30px; text-align: center; text-decoration: none; margin-left: 20px; -webkit-animation: glowing 1300ms infinite; -moz-animation: glowing 1300ms infinite; -o-animation: glowing 1300ms infinite; animation: glowing 1300ms infinite; > @-webkit-keyframes glowing < 0% < background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; > 50% < background-color: #21c7ed; -webkit-box-shadow: 0 0 15px #21c7ed; > 100% < background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; > > @keyframes glowing < 0% < background-color: #0091b2; box-shadow: 0 0 3px #0091b2; > 50% < background-color: #21c7ed; box-shadow: 0 0 15px #21c7ed; > 100% < background-color: #0091b2; box-shadow: 0 0 3px #0091b2; > > .svg-btn < display: block; width: 230px; height: 230px; margin-left: 10px; > svg < fill: blue; -webkit-animation: glowing-polygon 1300ms infinite; -moz-animation: glowing-polygon 1300ms infinite; -o-animation: glowing-polygon 1300ms infinite; animation: glowing-polygon 1300ms infinite; > @-webkit-keyframes glowing-polygon < 0% < fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); > 50% < fill: #21c7ed; -webkit-filter: drop-shadow( 0 0 15px #21c7ed); > 100% < fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); > > @keyframes glowingPolygon < 0% < fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); > 50% < fill: #21c7ed; filter: drop-shadow( 0 0 15px #21c7ed); > 100% < fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); > > style> head> body> h2>Создайте мигающую/светящуюся кнопку h2> div class="wrapper"> a class="button" href="#">Нажмите сюда! a> button type="submit" class="button">Нажмите сюда! button> a class="svg-btn"> svg height="210" width="200"> polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: #0091b2;"/> svg> a> div> body> html>

Источник

Как сделать пульсирующую кнопку

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

Вот, что мы хотим получить в итоге.

Итак, давайте начнем с разметки.

HTML разметка пульсирующей кнопки

Обычно я использую несложную структуру, которую разберем ниже. Например, я применял ее в виджете SmartLid, который планирую в этом году обновить и переписать, скорее всего на Vue.

 Как видите, действительно ничего сложного. Обычная кнопка с несколькими тегами "span" внутри. Первый отвечает за иконку, второй за вывод текста, а остальные, с классом "rings", за круги, которые и имитируют пульсацию.

Давайте добавим стили и добьёмся такого же внешнего вида как в примере выше. Начнем со стилей самой кнопки.

CSS стили кнопки

Туи все стандартно. При помощи flexbox выровнял все по центру. Задал размеры, форму, цвет, позиционирования и положение.

Управлять положением кнопки можно при помощи атрибутов «left», «right», «top», «bottom». У меня кнопка располагается справа внизу на расстоянии 50 пикселей. Я использую «bottom: 50px;» и «right: 50px;». Если вам нужно справа вверху, то удалите мои атрибуты и впишите, например, «top: 100px;» и «left: 100px».

Кроме, возможна ситуация, когда кнопку при скролле будут перекрывать другие элементы сайта. Для этого нужно узнать у этого элемента значение z-index и сделать у кнопки его выше. Аналогично и модальным окном. Может случиться так, что оно не будет перекрывать кнопку. В таком случае нужно сделать у модального окна значения атрибута z-index повыше.

Подробнее про z-index можно почитать на MDN.

Теперь давайте стилизуем «span» с иконкой и текстом, а также добьёмся того, чтобы при наведении они меняли друг друга.

Начнем с иконки, так как у нас она видна по умолчанию.

Надеюсь, тут сложностей не возникло. Единственное, если картинка не отображается, то почитайте про абсолютные и относительные пути и поправьте путь к картинке относительно структуры вашего сайта.

Теперь займемся блоком с текстом.

Тут тоже без сюрпризов. Временно можете закомментировать блок с иконкой, а у текста инвертировать «opacity» и «hidden», чтобы отцентрировать текст в случае, если используете другой шрифт. Сейчас этот блок невидно, так как логика в том, чтобы показать его только при наведении на кнопку. Давайте сделаем это.

.pulse-button:hover .pulse-button__icon < opacity: 0; visibility: hidden; position: absolute; transition: .3s; >.pulse-button:hover .pulse-button__text

При наведении на кнопку при помощи «opacity», «visibility» и «position» скрываем область с иконкой и показываем «span» с текстом. «Transition» отвечает за плавность.

Как сделать пульсации на CSS

Теперь займемся стилизацией окружностей, которые отвечают за имитацию пульсации. Как вы помните — у нас их 3.

.pulse-button__rings < border: 1px solid #ff0000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; width: auto; border-radius: 50%; animation-duration: 2.0s; animation-name: pulse_1; animation-iteration-count: infinite; z-index: -1; >.pulse-button__rings:nth-child(2) < animation-name: pulse_2; >.pulse-button__rings:nth-child(3)

Тут самое интересное это анимация. Говорю, что длиться она будет 2 секунды, бесконечно раз. В «annimation-name» передаю название анимации, вид которой описан ниже. «Border» — отвечает за толщину окружности.

@keyframes pulse_1 < from < opacity: 1; transform: scale(0.9, 0.9); >to < opacity: 0; transform: scale(1.3, 1.3); >> @keyframes pulse_2 < from < opacity: 1; transform: scale(0.8, 0.8); >to < opacity: 0; transform: scale(1.5, 1.5); >> @keyframes pulse_3 < from < opacity: 1; transform: scale(0.8, 0.8); >to < opacity: 0; transform: scale(1.7, 1.7); >>

Как видите, анимация достаточно примитивная. Меняется только прозрачность и масштаб, но это и позволяет добиться нужно эффекта.

О том как сделать вызов модального окна при клике на любую кнопку подробно описано в статье: «Как сделать модальное окно на сайте». Там разбираемся в 2 способах. Первый описывает как это сделать на чистом js, а второй — при помощи jQuery.

А на сегодня — все. Если возникнут вопросы — смело задавайте их в комментариях.

Исходник пульсирующей кнопки

Источник

Мигающая кнопка на чистом CSS

Как привлечь внимание посетителя к какому-либо элементу/блоку/ссылке/рекламе на своем сайте? Как обычно — заставить ее мигать или дергаться, в общем как-то анимировать. Но как быть, если не хочется перегружать свой сайт излишними скриптами и анимированными картинками (гифками)? Тогда на помощь приходит CSS. Мигающая кнопка на чистом CSS делается очень просто.

В данной статье предлагаю разобрать самый простой вариант создания мигающей кнопки с помощью средств CSS.

Как это работает?

Для примера представим, что у нас есть сайт ресторана, и, для осуществления заказа/бронирования столиков, на его страницах размещена кнопка «Заказать стол».

В нашем случае — это обычная ссылка, с картинкой внутри. Картинка имеет прозрачный фон и обернута в span, т.к. саму картинку мы не сможем заставить мигать, а вот span не составит труда.

Пришло время добавить некоторые стили оформления самой кнопки, а также заставим её мигать:

@-webkit-keyframes rainbow < 0% 50% 100% > @keyframes rainbow < 0% 50% 100% > #stolik < background: #a6ce20; line-height: 70px; display: block; height: 70px; width: 400px; padding-right: 25px; font-family: 'Open Sans Condensed', sans-serif; font-size: 32px; color: #fff; text-decoration: none; font-weight: bold; text-transform: uppercase; margin: 0px auto; webkit-animation: rainbow 2s linear 2s infinite; animation: rainbow 2s linear 2s infinite; >@-webkit-keyframes rainbow1 < 0% 50% 100% > @keyframes rainbow1 < 0% 50% 100% > #stolik span < background: #000; display: block; float: left; margin-right: 25px; text-align: center; height: 70px; width: 70px; webkit-animation: rainbow1 2s linear 2s infinite; animation: rainbow1 2s linear 2s infinite; >#stolik img

Здесь необходимо обратить внимание на свойство animation у элементов #stolik и span, в которых мы вызываем правило @keyframes (для каждого свой, соответственно). В правилах @keyframes мы указываем ключевые кадры смены цвета элементов, в то время как animation запускает эти кадры.

В зависимости от заданных цветов и скорости анимации будет создан эффект мигания. В примере задано 2 цвета, Вы же можете указать сколько угодно цветов, задав при этом проценты, на которых этот цвет будет достигаться.

В итоге у нас получается простая анимация мигания кнопки, которую можно просмотреть перейдя по ссылке ниже.

Комментарии

Здесь еще никто не оставлял комментарии.

Источник