Круглая кнопка (обратного звонка) CSS с анимацией

Обновлено: Андрей HTML и CSS

Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».

В этом кратком обзоре мы сделаем круглую кнопку с анимацией, зафиксировав ее на странице. В будущем можно будет привязать к ней модельное окно, вызываемое нажатием этой же кнопки. К слову, в модельном окне по желанию можно сделать не только форму заказ звонка, но и форму обратной связи.

Заказ обратного звонка

Посмотреть Демо

Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт 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);
    }
}
/* конец кнопки звязи */

Как видите, все очень просто. Удачной реализации, уважаемый читатель!

Читайте также:
85 комментариев
1 2 3 4 5

    2. Спасибо!

      Рад, что нашел именно то, что нужно.

      Единственная печаль — нет ссылки — чтобы кнопки стали кнопками, а не просто анимированными значками) — просто добавить ее не выйдет — нужно со стилями поработать дополнительно.

      Буду пробовать)

      Как раз нужно реализовать что-то подобное.

      Ответить

  2. Спасибо за неожиданно быстрый ответ)

    В данном случае я добавляю эти кнопки на Bootstrap- сайт, без CMS. Просто пишу код в Dreaweaver.

    И страничка с формой обратной связи уже есть и настроена.

    Хотел чтобы кнопка звонка отрабатывала, как ссылка tel:, а значок почты — открывал мою готовую страницу формы обратной связи

    Ответить

  4. и еще кнопки конфликтуют с установленным GetButton.io widget — для вызова WhatsApp)) пока его пришлось отключить. думаю, как его примерить с вашими симпатичными кнопками. В идеале — добавлю третьей кнопкой.

    Не решен вопрос — как их заставить стать кнопками)

    Ответить

  6. Здравствуйте! Спасибо за вашу работу, это определенно то, что я искал, но у меня такой вопрос, почему на мобильных устройствах, отображается не корректно? то есть просто в виде кружка со смещенной в сторону иконкой? Как это можно исправить?

    Ответить

    1. Добрый день. Не наблюдал на мобильных такой проблемы. Может просто кеш в телефоне почистить

      Ответить

  7. Здравствуйте! Простите за глупый вопрос. Поставил код Html в футер, а css код в начало файла — media.css своей текущей темы. Кнопки звонка в футере нет, есть телефончик и рядом слова «Заказать звонок».

    Ответить

    1. Добрый день. Нужно смотреть, в чем лично у вас проблема. Может просто кеш нужно было почистить или зайти с другого браузера. Или просто смотреть исходный код, что там не так

      Ответить

  8. Спасибо за кнопку!) Она крутая, но может кто подскажет, можно ли как то в ворд пресс сделать так на ПК кнопка переходит на страницу контакты ну я так сделал и нам так нужно было а вот на телефоне должно при нажатии набор номера?)

    Ответить

    1. Можно. К примеру, через @media запрос в css. Продублируйте кнопку, через @media спрячьте кнопку с телефоном до ширины сайта 750px. А после этой ширины ее сделайте доступной, а кнопку ссылкой уберите.

      Что-то вроде того:

      @media (min-width: 750px) {
        .класс кнопки с телефоном {
                display: none;
        }
}

@media (max-width: 750px) {
        .класс кнопки с ссылкой {
                display: none;
        }
}

      Ответить

  9. Здравствуйте. Подскажите как сделать кнопку обратного звонка на сайт html.

    У меня стоит кнопка на сайте но она не работает почему то

    Ответить

    1. День добрый. Так это кнопка и есть html. Что там может не получиться... расскажите подробнее.

      Ответить
1 2 3 4 5
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *