Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».
В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно, вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи.
Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.
Кнопка заказа звонка
HTML-код
<div type="button" class="callback-bt"> <div class="text-call"> <i class="fa fa-phone"></i> <span>Заказать<br>звонок</span> </div> </div>
CSS-код
/*кнопка звонка*/ .callback-bt { background:#38a3fd; border:2px solid #38a3fd; border-radius:50%; box-shadow:0 8px 10px rgba(56,163,253,0.3); cursor:pointer; height:68px; text-align:center; width:68px; position: fixed; right: 8%; bottom: 18%; z-index:999; transition:.3s; -webkit-animation:hoverWave linear 1s infinite; animation:hoverWave linear 1s infinite; } .callback-bt .text-call{ height:68px; width:68px; border-radius:50%; position:relative; overflow:hidden; } .callback-bt .text-call span { text-align: center; color:#38a3fd; opacity: 0; font-size: 0; position:absolute; right: 4px; top: 22px; line-height: 14px; font-weight: 600; text-transform: uppercase; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif; } .callback-bt .text-call:hover span { opacity: 1; font-size: 11px; } .callback-bt:hover i { display:none; } .callback-bt:hover { z-index:1; background:#fff; color:transparent; transition:.3s; } .callback-bt:hover i { color:#38a3fd; font-size:40px; transition:.3s; } .callback-bt i { color:#fff; font-size:34px; transition:.3s; line-height: 66px;transition: .5s ease-in-out; } .callback-bt i { animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; -webkit-animation: 1200ms ease 0s normal none 1 running shake; -webkit-animation-iteration-count: infinite; } @-webkit-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) } }@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); } } @-webkit-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 type="button" class="email-bt"> <div class="text-call"> <i class="fa fa-envelope" aria-hidden="true"></i> <span>Обратная<br>связь</span> </div> </div>
CSS-код
/*кнопка обратной связи*/ .email-bt { background:#F95C18; border:2px solid #F95C18; border-radius:50%; box-shadow:0 8px 10px rgba(249,92,24,0.3); cursor:pointer; height:68px; text-align:center; width:68px; position: fixed; left: 8%; bottom: 18%; z-index:999; transition:.3s; -webkit-animation:email-an linear 1s infinite; animation:email-an linear 1s infinite; } .email-bt .text-call{ height:68px; width:68px; border-radius:50%; position:relative; overflow:hidden; } .email-bt .text-call span { text-align: center; color:#F95C18; opacity: 0; font-size: 0; position:absolute; right: 4px; top: 22px; line-height: 14px; font-weight: 600; text-transform: uppercase; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif; } .email-bt .text-call:hover span { opacity: 1; font-size: 11px; } .email-bt:hover i { display:none; } .email-bt:hover { z-index:1; background:#fff; transition:.3s; } .email-bt:hover i { color:#38a3fd; font-size:40px; transition:.3s; } .email-bt i { color:#fff; font-size:29px; transition:.3s; line-height: 66px; } .email-bt i { -webkit-animation: opsimple 3s infinite; animation: opsimple 3s infinite; } @-webkit-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 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; } 40% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes opsimple { 0% { opacity: 0; } 40% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* конец кнопки звязи */
Как видите, все очень просто. Удачной реализации, уважаемый читатель!
Добрый день, кнопка работает все супер, спасибо! Есть один нюанс когда наводишь на нее мышкой на начинает пропадать как бы между слоями, особенно видно когда пересекается с изображением, можете подсказать что с этим можно сделать?
Здравствуйте. Не за что! Пока не совсем понятно. Пропадать? при навидении... то есть вся кнопка пропадает? Или она просто не поверх всех других элементов сайта?
Доброго времени суток.Скопировал коли css и вставил в style.css, html код вставил в footer.php.И все обновил, захожу на сайт, а кнопка не отображается, подскажите как исправить.Тема divi
Здравствуйте. Почистите кэш.
Все как в статье указано — выполнил.
Вместо телефона — квадратное окно.
Бутстрап = 4.0.
Прошу оказать помощь в решении проблемы.
Заранее благодарен
Скорей всего бутстрап просто свои стили подставляет. Это нужно смотреть по коду