Круглая кнопка (обратного звонка) 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

  1. Добрый день, кнопка работает все супер, спасибо! Есть один нюанс когда наводишь на нее мышкой на начинает пропадать как бы между слоями, особенно видно когда пересекается с изображением, можете подсказать что с этим можно сделать?

    Ответить

    1. Здравствуйте. Не за что! Пока не совсем понятно. Пропадать? при навидении... то есть вся кнопка пропадает? Или она просто не поверх всех других элементов сайта?

      Ответить

  2. Доброго времени суток.Скопировал коли css и вставил в style.css, html код вставил в footer.php.И все обновил, захожу на сайт, а кнопка не отображается, подскажите как исправить.Тема divi

    Ответить

  3. Все как в статье указано — выполнил.

    Вместо телефона — квадратное окно.

    Бутстрап = 4.0.

    Прошу оказать помощь в решении проблемы.

    Заранее благодарен

    Ответить

    1. Скорей всего бутстрап просто свои стили подставляет. Это нужно смотреть по коду

      Ответить

  6. Здравствуйте. Помогите плз разобраться. Установил вашу кнопку. Не отображается значок трубки. Понял что надо подключить шрифт. Полез в гуглФон, там он платный(. Увидел у вас урок как можно его вставить в вордпресс, там же нашел ссылку на скачивание. Скачал. Подключил fontawesome.css. Теперь отображается просто прямоугольник вместо трубки, с задуманной анимацией. верстаю на чистом html и css, классы не совпадают. Попробовал создать 2 чистых файла css и html и такая же история. Что то видать со шрифтом

    Ответить

    1. Добрый день. Скиньте ссылку, где реализована эта кнопка. Посмотрим что там.

      Ответить

    1. Вы используете font awesome 5. Иконка в коде от font awesome 4.7. Или поменяйте версию шрифта или поменяйте код иконки.

      Ответить

  8. Добрый день. Подскажите как проще поменять — что. На сайте шрифта не могу версию найти 4.7. В css тоже не пойму где иконка прописана.*(

    Ответить

  9. Спасибо, просто изменил link — «https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')»

    Ответить

  10. Приветствую, набрел на кнопку — прикольная, один только вопрос, как убрать эффект отображения надписи заказать звонок, т.е. просто оставить действие — нажал на кнопку — позвонил?

    Ответить

    1. День добрый. Из кода удалите span и немного подправьте css при наведении.

      Ответить

      1. WordSmall, спс, пошаманил немного и получилось всё как нуна 💡

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

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