ГлавнаяСтатьиWebFAQОбучениеКонтакты
Web
CSS
JavaScript
HTML
C#
jQuery
PHP
Flash
Yii / Yii2
Java
Net
CMS
3D
Parallax
MySQL
Ajax
XML
SEO
FTP
JSON
Design
Python
Back-end
Front-end
ASP
Perl
Template
Domain
Hosting
Plugin
Browser
DNS
SVG
Effect
Опрос
Какой язык программирования вы используете для написания сайта?








Авторизация
Логин:
Пароль:

Пульсирующая кнопка онлайн звонка на CSS

Опубликовано 21.02.2019

Четыре варианта реализации пульсирующей кнопки на чистом CSS без использования Javascript кода. Для создания эффекта применяется animation и @keyframes.

Вариант №1

Позвонить с сайта
онлайн

HTML код:

<div class="div_fon">
    <div class="div_container">
        <div id="button_puls_1" class="div_puls">
            <div class="puls_3"></div>
            <div class="puls_2"></div>
            <div class="puls_1"></div>
            <div class="div_micro"></div>
        </div>
        <div class="div_text">Позвонить с сайта<br>онлайн</div>
    </div>
</div>

CSS стили:

.div_fon {
    background-image: url('/article/8/resources/fon.jpg');
    background-size: cover;
    width: 100%;
    height: 130px;
    padding-top: 50px;
}
.div_container {
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    overflow: hidden;
}
.div_puls {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
}
.div_text {
    float: left;
    color: #ffffff;
    font-family: 'Arial';
    margin-top: 24px;
    margin-left: 4px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    line-height: 16px;
}
.div_micro {
    position: absolute;
    background-color: #ffffff;
    background-image: url('/article/8/resources/micro.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
@keyframes button_puls_1_1{
    0%  { background-color: rgba(255,255,255,0.0); }
    30%  { background-color: rgba(255,255,255,0.3); }
    60% { background-color: rgba(255,255,255,0.0); }
    100% { background-color: rgba(255,255,255,0.0); }
}
#button_puls_1 .puls_1 {
    animation-name: button_puls_1_1;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
}
@keyframes button_puls_1_2{
    0%  { background-color: rgba(255,255,255,0.0); }
    20%  { background-color: rgba(255,255,255,0.0); }
    50%  { background-color: rgba(255,255,255,0.2); }
    80% { background-color: rgba(255,255,255,0.0); }
    100% { background-color: rgba(255,255,255,0.0); }
}
#button_puls_1 .puls_2 {
    animation-name: button_puls_1_2;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
}
@keyframes button_puls_1_3{
    0%  { background-color: rgba(255,255,255,0.0); }
    40%  { background-color: rgba(255,255,255,0.0); }
    70%  { background-color: rgba(255,255,255,0.1); }
    100% { background-color: rgba(255,255,255,0.0); }
}
#button_puls_1 .puls_3 {
    animation-name: button_puls_1_3;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
}
#button_puls_1 .puls_1 {
    position: absolute;
    background-color: rgba(255,255,255,0.0);
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_1 .puls_2 {
    position: absolute;
    background-color: rgba(255,255,255,0.0);
    width: 60px;
    height: 60px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_1 .puls_3 {
    position: absolute;
    background-color: rgba(255,255,255,0.0);
    width: 70px;
    height: 70px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}



Вариант №2

Позвонить с сайта
онлайн

HTML код:

<div class="div_fon">
    <div class="div_container">
        <div id="button_puls_2" class="div_puls">
            <div class="puls_3"></div>
            <div class="puls_2"></div>
            <div class="puls_1"></div>
            <div class="div_micro"></div>
        </div>
        <div class="div_text">Позвонить с сайта<br>онлайн</div>
    </div>
</div>

CSS стили:

.div_fon {
    background-image: url('/article/8/resources/fon.jpg');
    background-size: cover;
    width: 100%;
    height: 130px;
    padding-top: 50px;
}
.div_container {
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    overflow: hidden;
}
.div_puls {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
}
.div_text {
    float: left;
    color: #ffffff;
    font-family: 'Arial';
    margin-top: 24px;
    margin-left: 4px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    line-height: 16px;
}
.div_micro {
    position: absolute;
    background-color: #ffffff;
    background-image: url('/article/8/resources/micro.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
@keyframes button_puls_2_1{
    0%  { border: 5px solid rgba(255,255,255,0.0); }
    10% { border: 5px solid rgba(255,255,255,0.15); }
    20% { border: 5px solid rgba(255,255,255,0.3); }
    30% { border: 5px solid rgba(255,255,255,0.3); }
    40% { border: 5px solid rgba(255,255,255,0.3); }
    50% { border: 5px solid rgba(255,255,255,0.3); }
    60% { border: 5px solid rgba(255,255,255,0.15); }
    70% { border: 5px solid rgba(255,255,255,0.0); }
    80% { border: 5px solid rgba(255,255,255,0.0); }
    90% { border: 5px solid rgba(255,255,255,0.0); }
    100% { border: 5px solid rgba(255,255,255,0.0); }
}
#button_puls_2 .puls_1 {
    animation-name: button_puls_2_1;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_2_2{
    0%  { border: 5px solid rgba(255,255,255,0.0); }
    10%  { border: 5px solid rgba(255,255,255,0.0); }
    20% { border: 5px solid rgba(255,255,255,0.15); }
    30% { border: 5px solid rgba(255,255,255,0.3); }
    40% { border: 5px solid rgba(255,255,255,0.3); }
    50% { border: 5px solid rgba(255,255,255,0.3); }
    60% { border: 5px solid rgba(255,255,255,0.3); }
    70% { border: 5px solid rgba(255,255,255,0.15); }
    80% { border: 5px solid rgba(255,255,255,0.0); }
    90% { border: 5px solid rgba(255,255,255,0.0); }
    100% { border: 5px solid rgba(255,255,255,0.0); }
}
#button_puls_2 .puls_2 {
    animation-name: button_puls_2_2;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_2_3{
    0%  { border: 5px solid rgba(255,255,255,0.0); }
    10%  { border: 5px solid rgba(255,255,255,0.0); }
    20% { border: 5px solid rgba(255,255,255,0.0); }
    30% { border: 5px solid rgba(255,255,255,0.15); }
    40% { border: 5px solid rgba(255,255,255,0.3); }
    50% { border: 5px solid rgba(255,255,255,0.3); }
    60% { border: 5px solid rgba(255,255,255,0.3); }
    70% { border: 5px solid rgba(255,255,255,0.3); }
    80% { border: 5px solid rgba(255,255,255,0.15); }
    90% { border: 5px solid rgba(255,255,255,0.0); }
    100% { border: 5px solid rgba(255,255,255,0.0); }
}
#button_puls_2 .puls_3 {
    animation-name: button_puls_2_3;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
#button_puls_2 .puls_1 {
    position: absolute;
    background-color: transparent;
    border: 5px solid rgba(255,255,255,0.0);
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_2 .puls_2 {
    position: absolute;
    background-color: transparent;
    border: 5px solid rgba(255,255,255,0.0);
    width: 52px;
    height: 52px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_2 .puls_3 {
    position: absolute;
    background-color: transparent;
    border: 5px solid rgba(255,255,255,0.0);
    width: 62px;
    height: 62px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}



Вариант №3

Позвонить с сайта
онлайн

HTML код:

<div class="div_fon">
    <div class="div_container">
        <div id="button_puls_3" class="div_puls">
            <div class="puls_3"></div>
            <div class="puls_2"></div>
            <div class="puls_1"></div>
            <div class="div_micro"></div>
        </div>
        <div class="div_text">Позвонить с сайта<br>онлайн</div>
    </div>
</div>

CSS стили:

.div_fon {
    background-image: url('/article/8/resources/fon.jpg');
    background-size: cover;
    width: 100%;
    height: 130px;
    padding-top: 50px;
}
.div_container {
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    overflow: hidden;
}
.div_puls {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
}
.div_text {
    float: left;
    color: #ffffff;
    font-family: 'Arial';
    margin-top: 24px;
    margin-left: 4px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    line-height: 16px;
}
.div_micro {
    position: absolute;
    background-color: #ffffff;
    background-image: url('/article/8/resources/micro.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
@keyframes button_puls_3_1{
    0%  { border: 3px solid rgba(255,255,255,0.0); }
    10% { border: 3px solid rgba(255,255,255,0.15); }
    20% { border: 3px solid rgba(255,255,255,0.3); }
    30% { border: 3px solid rgba(255,255,255,0.15); }
    40% { border: 3px solid rgba(255,255,255,0.0); }
    50% { border: 3px solid rgba(255,255,255,0.0); }
    60% { border: 3px solid rgba(255,255,255,0.0); }
    70% { border: 3px solid rgba(255,255,255,0.0); }
    80% { border: 3px solid rgba(255,255,255,0.0); }
    90% { border: 3px solid rgba(255,255,255,0.0); }
    100% { border: 3px solid rgba(255,255,255,0.0); }
}
#button_puls_3 .puls_1 {
    animation-name: button_puls_3_1;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_3_2{
    0%  { border: 3px solid rgba(255,255,255,0.0); }
    10% { border: 3px solid rgba(255,255,255,0.0); }
    20% { border: 3px solid rgba(255,255,255,0.3); }
    30% { border: 3px solid rgba(255,255,255,0.6); }
    40% { border: 3px solid rgba(255,255,255,0.3); }
    50% { border: 3px solid rgba(255,255,255,0.0); }
    60% { border: 3px solid rgba(255,255,255,0.0); }
    70% { border: 3px solid rgba(255,255,255,0.0); }
    80% { border: 3px solid rgba(255,255,255,0.0); }
    90% { border: 3px solid rgba(255,255,255,0.0); }
    100% { border: 3px solid rgba(255,255,255,0.0); }
}
#button_puls_3 .puls_2 {
    animation-name: button_puls_3_2;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_3_3{
    0%  { border: 3px solid rgba(255,255,255,0.0); }
    10% { border: 3px solid rgba(255,255,255,0.0); }
    20% { border: 3px solid rgba(255,255,255,0.0); }
    30% { border: 3px solid rgba(255,255,255,0.45); }
    40% { border: 3px solid rgba(255,255,255,0.9); }
    50% { border: 3px solid rgba(255,255,255,0.45); }
    60% { border: 3px solid rgba(255,255,255,0.0); }
    70% { border: 3px solid rgba(255,255,255,0.0); }
    80% { border: 3px solid rgba(255,255,255,0.0); }
    90% { border: 3px solid rgba(255,255,255,0.0); }
    100% { border: 3px solid rgba(255,255,255,0.0); }
}
#button_puls_3 .puls_3 {
    animation-name: button_puls_3_3;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
#button_puls_3 .puls_1 {
    position: absolute;
    background-color: transparent;
    border: 3px solid rgba(255,255,255,0.0);
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_3 .puls_2 {
    position: absolute;
    background-color: transparent;
    border: 3px solid rgba(255,255,255,0.0);
    width: 52px;
    height: 52px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_3 .puls_3 {
    position: absolute;
    background-color: transparent;
    border: 3px solid rgba(255,255,255,0.0);
    width: 62px;
    height: 62px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}



Вариант №4

Позвонить с сайта
онлайн

HTML код:

<div class="div_fon">
    <div class="div_container">
        <div id="button_puls_4" class="div_puls">
            <div class="puls_6"></div>
            <div class="puls_5"></div>
            <div class="puls_4"></div>
            <div class="puls_3"></div>
            <div class="puls_2"></div>
            <div class="puls_1"></div>
            <div class="div_micro"></div>
        </div>
        <div class="div_text">Позвонить с сайта<br>онлайн</div>
    </div>
</div>

CSS стили:

.div_fon {
    background-image: url('/article/8/resources/fon.jpg');
    background-size: cover;
    width: 100%;
    height: 130px;
    padding-top: 50px;
}
.div_container {
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    overflow: hidden;
}
.div_puls {
    float: left;
    position: relative;
    width: 80px;
    height: 80px;
}
.div_text {
    float: left;
    color: #ffffff;
    font-family: 'Arial';
    margin-top: 24px;
    margin-left: 4px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    line-height: 16px;
}
.div_micro {
    position: absolute;
    background-color: #ffffff;
    background-image: url('/article/8/resources/micro.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
@keyframes button_puls_4_1{
    0%  { border: 2px solid rgba(255,255,255,0.0); }
    10% { border: 2px solid rgba(255,255,255,0.1); }
    20% { border: 2px solid rgba(255,255,255,0.2); }
    30% { border: 2px solid rgba(255,255,255,0.1); }
    40% { border: 2px solid rgba(255,255,255,0.0); }
    50% { border: 2px solid rgba(255,255,255,0.0); }
    60% { border: 2px solid rgba(255,255,255,0.0); }
    70% { border: 2px solid rgba(255,255,255,0.0); }
    80% { border: 2px solid rgba(255,255,255,0.0); }
    90% { border: 2px solid rgba(255,255,255,0.0); }
    100% { border: 2px solid rgba(255,255,255,0.0); }
}
#button_puls_4 .puls_1 {
    animation-name: button_puls_4_1;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_4_2{
    0%  { border: 2px solid rgba(255,255,255,0.0); }
    10% { border: 2px solid rgba(255,255,255,0.0); }
    20% { border: 2px solid rgba(255,255,255,0.15); }
    30% { border: 2px solid rgba(255,255,255,0.3); }
    40% { border: 2px solid rgba(255,255,255,0.15); }
    50% { border: 2px solid rgba(255,255,255,0.0); }
    60% { border: 2px solid rgba(255,255,255,0.0); }
    70% { border: 2px solid rgba(255,255,255,0.0); }
    80% { border: 2px solid rgba(255,255,255,0.0); }
    90% { border: 2px solid rgba(255,255,255,0.0); }
    100% { border: 2px solid rgba(255,255,255,0.0); }
}
#button_puls_4 .puls_2 {
    animation-name: button_puls_4_2;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_4_3{
    0%  { border: 2px solid rgba(255,255,255,0.0); }
    10% { border: 2px solid rgba(255,255,255,0.0); }
    20% { border: 2px solid rgba(255,255,255,0.0); }
    30% { border: 2px solid rgba(255,255,255,0.2); }
    40% { border: 2px solid rgba(255,255,255,0.4); }
    50% { border: 2px solid rgba(255,255,255,0.2); }
    60% { border: 2px solid rgba(255,255,255,0.0); }
    70% { border: 2px solid rgba(255,255,255,0.0); }
    80% { border: 2px solid rgba(255,255,255,0.0); }
    90% { border: 2px solid rgba(255,255,255,0.0); }
    100% { border: 2px solid rgba(255,255,255,0.0); }
}
#button_puls_4 .puls_3 {
    animation-name: button_puls_4_3;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_4_4{
    0%  { border: 2px solid rgba(255,255,255,0.0); }
    10% { border: 2px solid rgba(255,255,255,0.0); }
    20% { border: 2px solid rgba(255,255,255,0.0); }
    30% { border: 2px solid rgba(255,255,255,0.0); }
    40% { border: 2px solid rgba(255,255,255,0.25); }
    50% { border: 2px solid rgba(255,255,255,0.5); }
    60% { border: 2px solid rgba(255,255,255,0.25); }
    70% { border: 2px solid rgba(255,255,255,0.0); }
    80% { border: 2px solid rgba(255,255,255,0.0); }
    90% { border: 2px solid rgba(255,255,255,0.0); }
    100% { border: 2px solid rgba(255,255,255,0.0); }
}
#button_puls_4 .puls_4 {
    animation-name: button_puls_4_4;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_4_5{
    0%  { border: 2px solid rgba(255,255,255,0.0); }
    10% { border: 2px solid rgba(255,255,255,0.0); }
    20% { border: 2px solid rgba(255,255,255,0.0); }
    30% { border: 2px solid rgba(255,255,255,0.0); }
    40% { border: 2px solid rgba(255,255,255,0.0); }
    50% { border: 2px solid rgba(255,255,255,0.3); }
    60% { border: 2px solid rgba(255,255,255,0.6); }
    70% { border: 2px solid rgba(255,255,255,0.3); }
    80% { border: 2px solid rgba(255,255,255,0.0); }
    90% { border: 2px solid rgba(255,255,255,0.0); }
    100% { border: 2px solid rgba(255,255,255,0.0); }
}
#button_puls_4 .puls_5 {
    animation-name: button_puls_4_5;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
@keyframes button_puls_4_6{
    0%  { border: 2px solid rgba(255,255,255,0.0); }
    10% { border: 2px solid rgba(255,255,255,0.0); }
    20% { border: 2px solid rgba(255,255,255,0.0); }
    30% { border: 2px solid rgba(255,255,255,0.0); }
    40% { border: 2px solid rgba(255,255,255,0.0); }
    50% { border: 2px solid rgba(255,255,255,0.0); }
    60% { border: 2px solid rgba(255,255,255,0.35); }
    70% { border: 2px solid rgba(255,255,255,0.7); }
    80% { border: 2px solid rgba(255,255,255,0.35); }
    90% { border: 2px solid rgba(255,255,255,0.0); }
    100% { border: 2px solid rgba(255,255,255,0.0); }
}
#button_puls_4 .puls_6 {
    animation-name: button_puls_4_6;
    animation-duration: 2.5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
#button_puls_4 .puls_1 {
    position: absolute;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.0);
    width: 42px;
    height: 42px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_4 .puls_2 {
    position: absolute;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.0);
    width: 46px;
    height: 46px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_4 .puls_3 {
    position: absolute;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.0);
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_4 .puls_4 {
    position: absolute;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.0);
    width: 54px;
    height: 54px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_4 .puls_5 {
    position: absolute;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.0);
    width: 58px;
    height: 58px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}
#button_puls_4 .puls_6 {
    position: absolute;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.0);
    width: 62px;
    height: 62px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: 100%;
}