Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».
В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно, вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи.
Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.
Кнопка заказа звонка
HTML-код
<div class="callback-bt"> <div class="text-call"> <span>Заказать<br>звонок</span> </div> </div>
CSS-код
/*кнопка звонка*/ .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); } } /* конец кнопки звонка */
Кнопка обратной связи
HTML-код
<div class="email-bt"> <div class="text-call"> <span>Обратная<br>связь</span> </div> </div>
CSS-код
/*кнопка обратной связи*/ .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); } } /* конец кнопки звязи */
Как видите, все очень просто. Удачной реализации, уважаемый читатель!
Добрый день, кнопка работает все супер, спасибо! Есть один нюанс когда наводишь на нее мышкой на начинает пропадать как бы между слоями, особенно видно когда пересекается с изображением, можете подсказать что с этим можно сделать?
Здравствуйте. Не за что! Пока не совсем понятно. Пропадать? при навидении... то есть вся кнопка пропадает? Или она просто не поверх всех других элементов сайта?
Доброго времени суток.Скопировал коли css и вставил в style.css, html код вставил в footer.php.И все обновил, захожу на сайт, а кнопка не отображается, подскажите как исправить.Тема divi
Здравствуйте. Почистите кэш.
Все как в статье указано — выполнил.
Вместо телефона — квадратное окно.
Бутстрап = 4.0.
Прошу оказать помощь в решении проблемы.
Заранее благодарен
Скорей всего бутстрап просто свои стили подставляет. Это нужно смотреть по коду
Проблема с бутстрап возникает на IOS
А чинится кстати проблема на IOS я уже нашел как. Нужно убрать type="button"
Здравствуйте. Помогите плз разобраться. Установил вашу кнопку. Не отображается значок трубки. Понял что надо подключить шрифт. Полез в гуглФон, там он платный(. Увидел у вас урок как можно его вставить в вордпресс, там же нашел ссылку на скачивание. Скачал. Подключил fontawesome.css. Теперь отображается просто прямоугольник вместо трубки, с задуманной анимацией. верстаю на чистом html и css, классы не совпадают. Попробовал создать 2 чистых файла css и html и такая же история. Что то видать со шрифтом
Добрый день. Скиньте ссылку, где реализована эта кнопка. Посмотрим что там.
Спасибо, добрый человек. Буду очень признателен.
Вы используете font awesome 5. Иконка в коде от font awesome 4.7. Или поменяйте версию шрифта или поменяйте код иконки.
Добрый день. Подскажите как проще поменять — что. На сайте шрифта не могу версию найти 4.7. В css тоже не пойму где иконка прописана.*(
Добрый. То что вы подключили, удалите. И подключите версию 4.7.
Статья в помощь wordsmall.ru/grafika-i-di... -primenenie.html
Способ 2!
Спасибо, просто изменил link — «https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')»
Рад был помочь.
Приветствую, набрел на кнопку — прикольная, один только вопрос, как убрать эффект отображения надписи заказать звонок, т.е. просто оставить действие — нажал на кнопку — позвонил?
День добрый. Из кода удалите span и немного подправьте css при наведении.
WordSmall, спс, пошаманил немного и получилось всё как нуна 💡