Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».
В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно, вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи.
Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт 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); } } /* конец кнопки звязи */
Как видите, все очень просто. Удачной реализации, уважаемый читатель!
Здравствуйте, а подскажите. А как сделать что бы такая кнопка на мобильном была видна а на декскопной версии сайта она не отображалась.
Здравствуйте.
.callback-bt {display: none;} @media only screen and (max-width: 400px) {.callback-bt {display: block;}}
Здравствуйте!
Подскажите пожалуйста куда хтмл код запихнуть лучше в вордпрессе?
В header.php ? Что то кривовато у меня как то получается,стили почему то не подключаются.
Здравствуйте. В файл footer.php перед функцией
<?php wp_footer(); ?>
. Стили добавить в файлstyle.css
Не отображается иконка телефона
Используйте шрифт Font Awesome. В статье об этом говорится.
В файл footer.php размещён код. Стили добавлены в файл style.css. Итог: трубка, рядом текст. Никаких кругов вокруг трубки и никакой анимации.
Посмотрите в исходном коде, что конфликтует или добавились вообще стили.
Доброго времени суток.
У меня возникла следующая проблема.
Все получилось почти как у вас, но только кнопка у меня квадратная, а круги от неё расходятся круглые.
Дело в том, что движки для сайтов в 10-50 страниц я не ставлю по своим соображениям.
У меня стоит Bootstrap 4/
Помогите с этим разобраться.
Здравствуйте. Так посмотрите в исходном коде, в чем проблема. И причем тут движки, это html и css. Демопросмтр, это обычная html страница.
добрый вечер всё скопировал и поставил (кнопку обратного звонка) на сайте появилось только надпись чёрным шрифтом...как исправить?
Здравствуйте. Проверяйте правильность подключения: js, css.
Здравствуйте! Подскажите, как сделать, что бы в мобильной версии кнопка не отображалась, а была видна только на пк
Здравствуйте.
@media only screen and (max-width: 400px) {.callback-bt {display: none;}}
WordSmall,Благодарю, все полилось
Извините, опечатка, все получилось, большое спасибо
Добрый день, а где поправить что бы изменить расположение кнопки на сайте сейчас она с права как поставить например с лева и ниже ?
Здравствуйте. В стилях чуток подправить правила. В классе
.callback-bt
поменять значениеright: 8%; bottom: 18%;
наleft: 8%; bottom: 10%;
.Здравствуйте. На HTML лендинге вместо иконки трубки телефона белый прямоугольник. Подскажите. как исправить.
Здравствуйте. Еще раз статью прочтите или комментарии выше.
Добрый день! Подскажите пожалуйста, у меня сайт на двух языках, на основном кнопка работает хорошо, как сделать, чтобы она и на втором языке работала
Добрый день! Не совсем понял. Вы говорите о переводе текста в кнопке? Если да, то зависит от того, как реализована мультиязычность сайта. Может попробовать через локализацию
<?php _e('Hello<br>World', wpdomia); ?>