Четыре варианта реализации пульсирующей кнопки на чистом 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%;
}