Круглая кнопка (обратного звонка) CSS с анимацией
Опубликовано: 01.09.2018
Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».
В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно , вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи .
Кнопка на CSS / Button animation CSS3
Посмотреть Демо
Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт 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; } } /* конец кнопки звязи */Как видите, все очень просто. Удачной реализации, уважаемый читатель!