Анимированная кнопка «Заказать звонок»

В последнее время, появилось огромное количество сервисов, предоставляющих услугу «перезвонить за 30 секунд». Многие владельцы сайтов желают видеть такую же кнопку на своем сайте, но т.к. пользоваться этими сервисами очень дорого, им достаточно того, что бы всплыла форма заказа звонка, где бы пользователь ввел свои контактные данные, а владельцу сайта пришло бы SMS.

Мы разработали 2 варианта пульсирующей кнопки.

1. Статичная, та что слева внизу страницы. При пролистывании контента страницы, она всегда находится на одном месте.

2. Подпрыгивающая, та, что внизу справа страницы. При пролистывании страницы, кнопка также начинает перемещаться вместе с контентом, но через некоторое время, возвращается на своё положенное место.

Скачайте архив CallMe.zip и распакуйте в папку tbForm на Вашем сайте.

В архиве 2 файла:CallMe.css и CallMe.js

1. Подключаем CSS и JavaScript:

2. Создаем кнопку

Перед закрывающим тегом </body> добавьте
для статичной кнопки:
<div class="tbForm_CallMe" data-tbform="M-XXX" style="position:fixed; left: 50px; bottom: 50px;" >
<div class="tbForm_shadow"></div>
<div class="tbForm_fone"><span>Заказать звонок</span></div>
</div>
для подпрыгивающей:
<div class="tbForm_CallMe jump" data-tbform="M-XXX">
<div class="tbForm_shadow"></div>
<div class="tbForm_fone"><span>Заказать звонок</span></div>
</div>

3. Настройка цвета кнопки

Заказать звонок

Выберете цвет кнопки:

По умолчанию, цвет кнопки красный (#C01F22) и параметр непрозрачности выставлен на 70% (opacity: .7).

Чтобы изменить цвет кнопки, необходимо открыть файл стилей CallMe.css и найти вот такие строчки (они в самом начале):
.tbForm_CallMe .tbForm_shadow {border-color: #C01F22;}
.tbForm_CallMe .tbForm_fone {background-color:#C01F22;}
заменив цвет #C01F22 на нужный Вам.

Если Вас не устраивает прозрачность кнопки, измените в строке:
.tbForm_CallMe {z-index: 99998; width:60px; height:60px; opacity: .7;}
параметр "opacity: .7" на "; opacity: 1", что бы кнопка стала полностью непрозрачной