Шпаргалка для WEB мастера: Моргающая кнопка позвонить с телефоном - скрипт
Сделано на простом Html и css - не нужно подключать никаких библиотек.
На мобильном: при клике на кнопку - переход на ваш телефон.
На десктопе: при клике - переход на любую страницу, либо форму обратного звонка, но можно сделать и появляющееся модальное окно с формой, если оно у вас есть.
Вот это вставлять в HTML
<div class="callback-widget-desc" data-event="jqm" data-param-id="15" data-name="callback">
<a href="/index.php?do=feedback" title="Форма обратной связи"><img src="/uploads/telefon-2.webp" class="phonewebp" alt="Форма обратной связи"/></a>
</div>
<div class="callback-widget-mob">
<a href="tel:+79800005665" title="Телефон"><img src="/uploads/telefon-2.webp" class="phonewebp" alt="Позвонить"/></a>
</div>
CSS
.callback-widget-desc {
display:block;
width:70px;
height:70px;
background-image: url(/webpimg/telefon.webp);
background-size:cover;
position:fixed;
bottom:60%;
right:30px;
border-radius: 50%;
cursor:pointer;
-webkit-animation-name: 'play_down';
-moz-animation-name: 'play_up';
animation-duration: 1.5s;
animation-iteration-count: infinite;
box-shadow: 0 0 0 3px rgba(22, 160, 133,.5);}
#content > div.callback-widget-desc > span > i, body > div.body > div.main.banner-AUTO > div.callback-widget-desc > span > i {height: 70px;width: 70px;line-height: 55px;padding-top:7px;font-size: 45px!important;}
#content > div.callback-widget-desc > span, div.main.banner-AUTO > div.callback-widget-desc > span {font-size: 45px!important;}
.callback-widget-mob {display:none;}
.phonewebp {width:70px;height:70px;margin:0!important;}
@keyframes play_up { 0%
{
-webkit-box-shadow: 0 0 rgba(22,160,133,.6);
-moz-box-shadow: 0 0 rgba(22,160,133,.6);
box-shadow: 0 0 rgba(22,160,133,.6);
} to {
-webkit-box-shadow: 0 0 0 20px rgba(22,160,133,0);
-moz-box-shadow: 0 0 0 20px rgba(22,160,133,0);
box-shadow: 0 0 0 20px rgba(22,160,133,0);
} }
@keyframes play_down { 0%
{
-webkit-box-shadow: 0 0 rgba(22,160,133,.6);
-moz-box-shadow: 0 0 rgba(22,160,133,.6);
box-shadow: 0 0 rgba(22,160,133,.6);
} to {
-webkit-box-shadow: 0 0 0 20px rgba(22,160,133,0);
-moz-box-shadow: 0 0 0 20px rgba(22,160,133,0);
box-shadow: 0 0 0 20px rgba(22,160,133,0);
} }
@media only screen and (min-width: 320px) and (max-width: 600px) {
.callback-widget-desc {display:none;}
.callback-widget-mob {
display: block;
width: 56px;
height: 56px;
position: fixed;
bottom: 50%;
right: 43px;
border-radius: 50%;
z-index: 10000;
border: 0px cursor: pointer;
-webkit-animation-name: 'play_down';
-moz-animation-name: 'play_up';
animation-duration: 1.5s;
animation-iteration-count: infinite;
box-shadow: 0 0 0 3px rgba(22, 160, 133, .5);}
.phonewebp {width:56px;height:56px;margin:0!important;}
#content > div.callback-widget-mob > span {font-size: 35px!important;overflow-x:hidden!important;}
#content > div.callback-widget-mob > a > i {height: 56px;width: 56px;line-height: 55px;padding-top:0px;font-size: 35px!important;overflow-x:hidden!important;}
}
Демо здесь:
Пак с иконкой:
Под номером 3
Больше материалов а моем Телеграме :
Начать дискуссию