Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».
В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно, вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи.
Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт 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); } } /* конец кнопки звязи */
Как видите, все очень просто. Удачной реализации, уважаемый читатель!
Можете подсказать как сделать кнопку кликабельной
что бы при нажатии на кнопку звонка просто начинался звонок
Просто обверните кнопку ссылкой с номером телефона. Пример:
<a href="tel:+12345678912" rel="nofollow ugc">тут кнопка</a>
Добрый вечер. Иконка трубки на пк отображается нормально(и в мобильной через f12 тоже). А вот на телефоне не отображается,просто черный квадрат. Как такое может быть ? Сайт на макете, с предустановленными Font Awesome Free 5.15.4
Здравствуйте. В статье иконка сделана с версией Font Awesome 4. Попробуйте поменять код иконки трубки с 5-й версии шрифта.
Примерно так:
Спаисбо большое ! Да, я поменял font-family и это мне не помогло. Моему коду не хватило font-weight.(хоть у меня и была мысль об этом). Теперь все отлично работает!
Отлично! Приходите еще)