Круглая кнопка обратного звонка css

Анимированная кнопка обратного звонка

Наверняка вы много раз видели на разных сайтах — пульсирующую кнопку с иконкой телефонной трубки. Это достаточно эффективный прием, побуждающий пользователя к действию. При нажатии на кнопку, появляется форма, где человек оставляет свой телефон и ждет, когда ему перезвонят, экономя свои деньги.

Анимированная кнопка обратного звонка:

Демо

Пример формы в модальном окне:

Иконка с сайта Font Awesome

Для начала необходимо подключить файл стилей font-awesome.min.css к HTML файлу.

Находим нужную иконку на сайте https://fontawesome.com, копируем код и вставляем в наш HTML файл, между тегами div.

Иконка вставилась, теперь надо её стилизовать в файле style.css, применяя все те же свойства, которые можно применить и к шрифтам. Но сначала надо создать круг, внутри которого будет иконка с телефонной трубкой.

Создаем круг с иконкой в центре

Рисуем голубой квадрат и скругляем его углы на 50% — получаем фигуру круга.

.pulse background: #4fbaea;
border-radius: 50%;
width: 100px;
height: 100px;
>

Позиционируем круг в центре окна браузера, это будет абсолютное позиционирование, когда отсчет единиц измерения ведётся от левого верхнего угла окна браузера.

.pulse position: absolute;
top: 50%;
left: 50%;
>

Кнопка пока не стоит точно по центру, трансформация помогает подвинуть кнопку, как надо.

.pulse transform: translate(-50%, -50%);
>

Иконка телефонной трубки уже находится внутри круга, как дочерний элемент родителя блока div.

text-align: center;
line-height: 100px;

Кнопка обратного звонка готова и ждет анимации.

Псевдоэлементы :before и :after

Рисуем рамку вокруг кнопки, используя оба псевдоэлемента до и после. Псевдоэлементами называются элементы, которых нет в HTML разметке, поэтому — «псевдо», а для создания CSS эффекта — они хорошо подходят.

.pulse:before,
.pulse:after content: » «;
display: block;
position: absolute;
border: 50%;
border: 1px solid #4fbaea;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
>

Все четыре стороны рамки отступают от края круга на 20 пикселей.

Как вы догадались, что к псевдо рамке (:before, :after) и будет применена анимация с именем — animate (придумать самим) с эффектом пульсации. Пульсация будет происходить линейно с длительности 1.5 секунды с бесконечным повтором.

.pulse:before,
.pulse:after animation: animate 1.5s linear infinite;
>

Анимация @keyframes

Сама анимация состоит из трёх ключевых кадров — @keyframes, где 0% — первый кадр, 50% — промежуточный и 100% — последний кадр.

@keyframes animate
0%
transform: scale(0.5);
opacity: 0;
>
50%
opacity: 1;
>
100%
transform: scale(1.2);
opacity: 0;
>
>

Рамка увеличивается в размерах (transform: scale) и делается невидимой (opacity: 0). Комбинируя свойства трансформации и прозрачности и возникает ощущение — пульсации кнопки.

На jsfiddle вы можете увидеть весь код целиком.

Создано 08.06.2018 11:00:00

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

Доброго дня, а подскажите как подключить форму вводу к этой кнопке?

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Кнопка обратного звонка с помощью CSS

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

Если по умолчанию мы видим простой круг в светло-синей палитре, которая меняется в CSS по цветовой гамме. То стоит только навести курсор, так появится волны и вместо знака трубки, то здесь происходит изменение на слова «кнопка связи» с удержанием, то только курсор убираем, так все остается, как было изначально.

Так выглядит в не рабочем, и аналогично в рабочем виде:

.vidualsatun <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>
.campakesad, .vebusines, .nigkugas <
position: absolute;
width: 90px;
height: 90px;
color: #fff;
text-align: center;
border-radius: 50%;
>
.vebusines <
cursor: pointer;
z-index: 1;
overflow: hidden;
>
.campakesad <
background: #5CC2E2;
position: relative;
transition: .5s;
>
.nigkugas <
font-size: 50px;
line-height: 94px;
animation: phone .9s ease-in-out infinite;
>
.dsacin <
position: absolute;
opacity: 0;
text-transform: uppercase;
font-weight: 700;
top: 28px;
font-size: 15px;
transform: scaleX(-1);
transition: .5s ease-in-out;
>
.nigkugas i <
transition: .5s ease-in-out;
>
.campakesad:hover <
background: #29AEE3;
>
.campakesad:hover i <
transition: .5s ease-in-out;
transform: scale(0);
>
.campakesad:hover .dsacin <
transform: scaleX(1);
transition: .5s ease-in-out;
opacity: 1;
>
.campakesad:hover::before,
.campakesad:hover::after <
content: »;
position: absolute;
border: 1px solid #29AEE3;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
border-radius: 50%;
animation: pulse 1.8s linear infinite;
opacity: 0;
>
.campakesad:hover::after <
animation-delay: .5s;
>

@keyframes phone <
0%, 100% <
transform: rotate(-20deg);
>
50% <
transform: rotate(21deg);
>
>
@keyframes pulse <
0% <
transform: scale(0.5);
opacity: 0;
>
50% <
opacity: 1;
>
100% <
transform: scale(1.2);
opacity: 0;
>
>

Как уже заметили, что все работает на чистом CSS, разве только нужно подключить шрифтовые иконки Font Awesome, что отвечают за вывод знака трубки.

Которая изначально красиво показана, где не установлена на одном месте, а производится в связке с анимацией, что смотрится великолепно на любом сайте.

Источник

Круглая кнопка (обратного звонка) CSS с анимацией

Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».

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

Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.

Кнопка заказа звонка

/*кнопка звонка*/ .callback-bt < background: #38a3fd; border-radius: 50%; box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3); cursor: pointer; border: 2px solid transparent; display: block; height: 75px; width: 75px; text-align: center; position: fixed; right: 8%; bottom: 18%; z-index: 999; transition: .3s ease-in-out; -webkit-animation: hoverWave linear 1s infinite; animation: hoverWave linear 1s infinite; >.callback-bt:hover < background: #fff; border: 2px solid #38a3fd; >.callback-bt .text-call < height: 75px; width: 75px; border-radius: 50%; position: relative; >.callback-bt .text-call:after < content: "\f095"; display: block; font-family: fontawesome; color: #fff; font-size: 38px; line-height: 75px; height: 75px; width: 75px; opacity: 1; transition: .3s ease-in-out; animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; >.callback-bt .text-call:hover:after < opacity: 0; >.callback-bt .text-call span < color: #38a3fd; display: block; left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); opacity: 0; font-size: 11px; line-height: 12px; font-weight: 600; text-transform: uppercase; transition: .3s ease-in-out; font-family: 'montserrat', Arial, Helvetica, sans-serif; >.callback-bt .text-call:hover span < opacity: 1; >@keyframes hoverWave < 0% < box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2) >40% < box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2) >80% < box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067) >100% < box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0) >> /* animations icon */ @keyframes shake < 0% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >10% < transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); >20% < transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); >30% < transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); >40% < transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); >50% < transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); >60% < transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); >70% < transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); >80% < transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); >90% < transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); >100% < transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); >> /* конец кнопки звонка */

Кнопка обратной связи

/*кнопка обратной связи*/ .email-bt < background: #F95C18; border-radius: 50%; box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3); cursor: pointer; border: 2px solid transparent; display: block; height: 75px; width: 75px; text-align: center; position: fixed; left: 8%; bottom: 18%; z-index: 999; transition: .3s ease-in-out; -webkit-animation: email-an linear 1s infinite; animation: email-an linear 1s infinite; >.email-bt:hover < background: #fff; border: 2px solid #F95C18; >.email-bt .text-call < height: 75px; width: 75px; border-radius: 50%; position: relative; >.email-bt .text-call:after < content: "\f0e0"; display: block; font-family: fontawesome; color: #fff; font-size: 34px; line-height: 75px; height: 75px; width: 75px; opacity: 1; transition: .3s ease-in-out; -webkit-animation: opsimple 3s infinite; animation: opsimple 3s infinite; >.email-bt .text-call:hover:after < opacity: 0; >.email-bt .text-call span < color: #F95C18; display: block; left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); z-index: 1; opacity: 0; font-size: 11px; line-height: 12px; font-weight: 600; text-transform: uppercase; transition: .3s ease-in-out; font-family: 'montserrat', Arial, Helvetica, sans-serif; >.email-bt .text-call:hover span < opacity: 1; >@keyframes email-an < 0% < box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 0 rgba(249, 92, 24, 0.2), 0 0 0 0 rgba(249, 92, 24, 0.2) >40% < box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 15px rgba(249, 92, 24, 0.2), 0 0 0 0 rgba(249, 92, 24, 0.2) >80% < box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 30px rgba(249, 92, 24, 0), 0 0 0 26.7px rgba(249, 92, 24, 0.067) >100% < box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3), 0 0 0 30px rgba(249, 92, 24, 0), 0 0 0 40px rgba(249, 92, 24, 0.0) >> @keyframes opsimple < 0% < opacity: 0; transform: rotate(0deg); >40% < opacity: 1; >80% < opacity: 1; >100% < opacity: 0; transform: rotate(360deg); >> /* конец кнопки звязи */

Как видите, все очень просто. Удачной реализации, уважаемый читатель!

Читайте также:

Можете подсказать как сделать кнопку кликабельной что бы при нажатии на кнопку звонка просто начинался звонок

Источник

Анимированная кнопка обратного звонка

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

Подключать себе такой функционал заказчик не хотел. Ему просто надо была кнопка, после нажатия на которую, появлялось бы модальное окно с формой заказа. Кнопки обратного звонка — это очень полезная вещь. Благодаря им, человек может заказать звонок себе не тратя свои деньги, что есть важным для нашего человека :). По сути, такую кнопку можно сделать и для возвращения наверх страницы и для кнопки помощи и тд. Главный элемент тут будет — анимация, пульсирующий эффект.

09.09.2016 Добавлена новая кнопка, на старой не работал эффект пульсации в новом Хроме.

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

УВАЖАЕМЫЕ МАСТЕРА! Имейте совесть, если используете данную кнопку, то хотя бы картинку трубки телефонной заливайте себе на хостинг, а не тупо копируете ссылку на мой сайт. Таких умельцев и их сайты прославлю на весь интернет 🙂

Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку.

Кнопка рассчитана на подключение модального окна из другой статьи. Если подключаете сторонние ссылки, то у самой кнопки в ее HTML коде есть событие

Которое запрещает переход по ссылке. Это сделано для того, чтобы в адрес не добавлялся якорь окна. Удалите это событие и тогда, если вы укажите ссылку на страницу или еще что ни-будь, переход осуществится

Теперь в файл стилей надо добавить сами стили CSS.

#popup__toggle .img-circle .circlephone .circle-fill .img-circle .img-circleblock .img-circle:hover @keyframes pulse 50% 100% > @-webkit-keyframes pulse 50% 100% > @keyframes tossing < 0% 50% 100% > @-webkit-keyframes tossing < 0% 50% 100% > @-moz-keyframes circle-anim < 0% 30% 100% > @-webkit-keyframes circle-anim < 0% 30% 100% > @-o-keyframes circle-anim < 0% 30% 100% > @keyframes circle-anim < 0% 30% 100% > @-moz-keyframes circle-fill-anim < 0% 50% 100% > @-webkit-keyframes circle-fill-anim < 0% 50% 100% > @-o-keyframes circle-fill-anim < 0% 50% 100% > @keyframes circle-fill-anim < 0% 50% 100% >

Первые 7 строк отвечают за внешний вид кнопки, далее уже анимация. В первой строке можно настроить расположение кнопки, а в шестой строке указываете путь к изображению в параметре background-image:url(mini.png).

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

Чтобы привязать к этой кнопке модальное окно, Вам поможет статья — Модальное окно с помощью CSS и Java. Если все сделаете согласно инструкции, проблем у Вас не возникнет.

На этом все, спасибо за внимание. 🙂

P.S.
Я решил создать плагин, который поможет Вам без проблем получить нужный результат. Можете перейти и посмотреть:

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂

Источник