Как сделать кнопку звонка с сайта

Как сделать кнопку звонка с сайта

Главная Web-дизайн Анимированная кнопка обратного звонка Анимированная кнопка

Доброго времени суток. 🙂

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

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

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



Скачать иконку

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

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

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

<a href="#" id="popup__toggle" onclick="return false;"><div class="circlephone" style="transform-origin: center;"></div><div class="circle-fill" style="transform-origin: center;"></div><div class="img-circle" style="transform-origin: center;"><div class="img-circleblock" style="transform-origin: center;"></div></div></a>

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

onclick="return false;"

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

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

#popup__toggle{bottom:25px;right:10px;position:fixed;z-index:999;} .img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;} .circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;} .img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;} .img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;} .img-circle:hover{opacity: 1;} @keyframes pulse {0% {transform: scale(0.9);opacity: 1;} 50% {transform: scale(1); opacity: 1; } 100% {transform: scale(0.9);opacity: 1;}} @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;} 50% {-webkit-transform: scale(1);opacity: 1;} 100% {-webkit-transform: scale(0.95);opacity: 1;}} @keyframes tossing { 0% {transform: rotate(-8deg);} 50% {transform: rotate(8deg);} 100% {transform: rotate(-8deg);}} @-webkit-keyframes tossing { 0% {-webkit-transform: rotate(-8deg);} 50% {-webkit-transform: rotate(8deg);} 100% {-webkit-transform: rotate(-8deg);}} @-moz-keyframes circle-anim { 0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;} 30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;} 100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}} @-webkit-keyframes circle-anim { 0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;} 30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;} 100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}} @-o-keyframes circle-anim { 0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;} 30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;} 100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}} @keyframes circle-anim { 0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;} 30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;} 100% {transform: rotate(0deg) scale(1) skew(1deg); opacity: .1;}} @-moz-keyframes circle-fill-anim { 0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;} 100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-webkit-keyframes circle-fill-anim { 0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; } 50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2; } 100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @-o-keyframes circle-fill-anim { 0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}} @keyframes circle-fill-anim { 0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;} 50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;} 100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

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

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

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

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

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

Плагин заказа обратного звонка

Форма ввода


Метки: css анимация без плагина верстка заказать звонок кнопка код обратный


Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
5 4 3 2 1

Проголосовало: 105, в среднем: 5 из 5


Предыдущая запись
Как запретить ссылки в комментариях WordPress

Следующая запись
Якоря и плавный переход по якорным ссылкам

Похожие записи: Красивый ползунок выбора значения. UI ползунок на сайт
Красивый ползунок выбора значения. UI ползунок на сайт Изменение, создание, всплывающих подсказок title с помощью CSS
Изменение, создание, всплывающих подсказок title с помощью CSS Фиксированная, открывающаяся, боковая панель, для меню на сайт
Фиксированная, открывающаяся, боковая панель, для меню на сайт Всплывающее, модальное окно на сайт в виде пузырьков с анимацией
Всплывающее, модальное окно на сайт в виде пузырьков с анимацией Выполнение скрипта при прокрутке до нужного места
Выполнение скрипта при прокрутке до нужного места

Нажмите, чтобы добавить код в комментарий


Как сделать кнопку звонка с сайта

Похожие записи:



Как сделать оболочку windows 7 на windows 10

Как сделать марсельский воск

Соответствуй схеме счастье досуг образ