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

  1. Здравствуйте, а подскажите. А как сделать что бы такая кнопка на мобильном была видна а на декскопной версии сайта она не отображалась.

    Ответить

    1. Здравствуйте. .callback-bt {display: none;} @media only screen and (max-width: 400px) {.callback-bt {display: block;}}

      Ответить

  2. Здравствуйте!

    Подскажите пожалуйста куда хтмл код запихнуть лучше в вордпрессе?

    В header.php ? Что то кривовато у меня как то получается,стили почему то не подключаются.

    Ответить

    1. Здравствуйте. В файл footer.php перед функцией <?php wp_footer(); ?>. Стили добавить в файл style.css

      Ответить

  4. В файл footer.php размещён код. Стили добавлены в файл style.css. Итог: трубка, рядом текст. Никаких кругов вокруг трубки и никакой анимации.

    Ответить

    1. Посмотрите в исходном коде, что конфликтует или добавились вообще стили.

      Ответить

  5. Доброго времени суток.

    У меня возникла следующая проблема.

    Все получилось почти как у вас, но только кнопка у меня квадратная, а круги от неё расходятся круглые.

    Дело в том, что движки для сайтов в 10-50 страниц я не ставлю по своим соображениям.

    У меня стоит Bootstrap 4/

    Помогите с этим разобраться.

    Ответить

    1. Здравствуйте. Так посмотрите в исходном коде, в чем проблема. И причем тут движки, это html и css. Демопросмтр, это обычная html страница.

      Ответить

  6. добрый вечер всё скопировал и поставил (кнопку обратного звонка) на сайте появилось только надпись чёрным шрифтом...как исправить?

    Ответить

  7. Здравствуйте! Подскажите, как сделать, что бы в мобильной версии кнопка не отображалась, а была видна только на пк

    Ответить

      2. Извините, опечатка, все получилось, большое спасибо

  8. Добрый день, а где поправить что бы изменить расположение кнопки на сайте сейчас она с права как поставить например с лева и ниже ?

    Ответить

    1. Здравствуйте. В стилях чуток подправить правила. В классе .callback-bt поменять значение right: 8%; bottom: 18%; на left: 8%; bottom: 10%;.

      Ответить

  9. Здравствуйте. На HTML лендинге вместо иконки трубки телефона белый прямоугольник. Подскажите. как исправить.

    Ответить

  10. Добрый день! Подскажите пожалуйста, у меня сайт на двух языках, на основном кнопка работает хорошо, как сделать, чтобы она и на втором языке работала

    Ответить

    1. Добрый день! Не совсем понял. Вы говорите о переводе текста в кнопке? Если да, то зависит от того, как реализована мультиязычность сайта. Может попробовать через локализацию <?php _e('Hello<br>World', wpdomia); ?>

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

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