Здравствуйте!
Подскажите пожалуйста, мне нужна кнопка для сайта типа вот такой
http://gnatkovsky.com.ua/test/
но не где не могу найти исходников как это реализовано.
(готовые сервисы не предлагайте). т.е. нужен исходный код html+css
Как можно это реализовать?

(0) держи

<div id="pop_up_bl">
<a id="setсookieph" class="close" href="#" title="Закрыть" onclick="document.getElementById('minbotph').style.display='block';document.getElementById('pop_up_bl').style.display='none'; return false;"></a>
<a id="stbotph" href="#" onclick="document.getElementById('stbotph').style.display='none';document.getElementById('slibotph').style.display='block';return false;"><div class="circlephone" style="transform-origin: center;"></div><div class="circle-fill" style="transform-origin: center;"></div><div class="img-circle" style="transform-origin: center;"><div class="img-circleblock" style="transform-origin: center;"></div></div></a>
<a id="slibotph" href="#" onclick="document.getElementById('slibotph').style.display='none';document.getElementById('stbotph').style.display='block';return false;" style="display: none;"><div class="circlephone" style="transform-origin: center;"></div><div class="circle-fill" style="transform-origin: center;"></div><div class="img-circle2" style="transform-origin: center;"><div class="img-circleblock2" style="transform-origin: center;"></div></div></a>
<div id="content1" style="display: none;">
<div id="mssgresbox">
<form method="post" action="" id="formMain" name="">

<label for="tele_phone_call" id="labtelcal">Пример:+380661234567</label>
<input id="tele_phone_call" type="tel" name="tele_phone_call" maxlength="15" onkeyup="if(this.value.length >= 7) document.getElementById('butcall').disabled = false; else document.getElementById('butcall').disabled = true;" placeholder="Введите здесь ваш номер" autocomplete="off">
<input class="hidden_in" type="email" name="e_mail_call" value="[email protected]" hidden="">
<input class="hidden_in" type="email" name="from_e_mail_call" value="[email protected]" hidden="">
<input id="butcall" type="button" value="" onclick="document.getElementById('slibotph').style.display='none'; document.getElementById('content1').style.width='300px'; document.getElementById('content1').style.padding='0px'; AjaxFormRequest('mssgresbox', 'formMain', 'http://gnatkovsky.com.ua/test/wp-content/plugins/ph_call_gnat/zakaz.php')"; disabled="">
</form>
</div>
</div>
</div>

(0) сохрани себе страницу целиком, будет тебе и html, и css

(1) Ох, шайтан. Как ты это ты сделал?

(3) эээ, инструменты google chrome, а что?

(4) Шуткую, как бэ.

(4) причем не над тобой.

(1) чего то не отображается... сорри

(7) так там еще js 100% есть его тоже вытащи и вставь

(8) и еще 100500 файлов в придачу.

(8) Скорей всего с помощью css сделано. J

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
.img-circle,.img-circle2{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;}
.circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:160px;height:160px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:110px;height:110px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:77px;height: 77px;bottom: 17px;right: 52px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;}
.img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:77px;height:77px;background-image:url(images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
.img-circle:hover{opacity: 1;}
.img-circle:hover .img-circleblock{background-image:url(images/mini2.png);animation-name: pulse;-webkit-animation-name: pulse; animation-duration: 2.5s; -webkit-animation-duration: 2.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
.img-circle2{box-sizing:content-box;-webkit-box-sizing:content-box;width:77px;height:77px;bottom: 17px;right: 52px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: 1;}
.img-circleblock2{box-sizing:content-box;-webkit-box-sizing:content-box;width:77px;height:77px;background-image:url(images/mini3.png);background-position: center center;background-repeat:no-repeat;-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.img-circleblock2:hover {background-image:url(images/mini.png);-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
@keyframes pulse {0% {transform: scale(0.9);opacity: 1;}
  50% {transform: scale(1); opacity: 1; }  
  100% {transform: scale(0.9);opacity: 1;}}
@-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;}
  50% {-webkit-transform: scale(1);opacity: 1;}  
  100% {-webkit-transform: scale(0.95);opacity: 1;}}
@keyframes tossing {
  0% {transform: rotate(-8deg);}
  50% {transform: rotate(8deg);}
  100% {transform: rotate(-8deg);}}
@-webkit-keyframes tossing {
  0% {-webkit-transform: rotate(-8deg);}
  50% {-webkit-transform: rotate(8deg);}
  100% {-webkit-transform: rotate(-8deg);}}
@-moz-keyframes circle-anim {
  0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;}
  30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;}
  100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}}
@-webkit-keyframes circle-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;}
  30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;}
  100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}}
@-o-keyframes circle-anim {
  0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;}
  30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;}
  100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}}
@keyframes circle-anim {
  0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;}
  30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;}
  100% {transform: rotate(0deg) scale(1) skew(1deg);
opacity: .1;}}
@-moz-keyframes circle-fill-anim {
  0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;}
  100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-webkit-keyframes circle-fill-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;  }
  50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;  }
  100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-o-keyframes circle-fill-anim {
  0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@keyframes circle-fill-anim {
  0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
  
.call_button{background: url(images/mini.png) no-repeat;bottom:6px;right:6px;position:absolute;width:25px;height:25px;-webkit-background-size: cover;-moz-background-size:cover;background-size:cover;}
#minbotph{background:#29AEE3;z-index:999997;width:50px;height:50px;bottom:0;right:0;position:fixed;opacity: 0.7;-webkit-border-top-left-radius: 50px;-moz-border-radius-topleft: 50px;border-top-left-radius: 50px;}
#minbotph:hover{opacity: 1;}
#stbotph,#slibotph{float:left;position:relative;width:120px;height:120px;}
#content1{float:left;height:81px;margin:22px 0 0 -120px;background:rgba(219,241,254, 0.84);padding:0 17px 0 90px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}
#tele_phone_call{line-height:35px;box-sizing:content-box;-webkit-box-sizing:content-box;background:#fff;outline: none;-webkit-appearance: none;vertical-align: middle;width:220px;margin:15px 0 17px 0;color:#1f6074;font-family: 'Open Sans', sans-serif;font-size:26px;border:2px solid #63cff6;padding:2px 10px 3px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px}
#tele_phone_call::-webkit-input-placeholder {font-size:14px;line-height:35px;vertical-align: middle;}
#tele_phone_call::-moz-placeholder  {font-size:14px;line-height:35px;vertical-align: middle;}
#tele_phone_call:-moz-placeholder {font-size:14px;line-height:35px;vertical-align: middle;}
#tele_phone_call:-ms-input-placeholder  {font-size:14px;line-height:35px;vertical-align: middle;}
#tele_phone_call:focus::-webkit-input-placeholder {color:transparent;}
#tele_phone_call:focus::-moz-placeholder {color:transparent;}
#tele_phone_call:focus:-moz-placeholder {color:transparent;}
#tele_phone_call:focus:-ms-input-placeholder {color:transparent;}
#labtelcal{font-size:9px;line-height:9px;color:#3cff6;bottom:22px;right:80px;position:absolute;}
#butcall{font-size:0;vertical-align: middle;width:44px;height:44px;line-height:44px;margin:0;background:#eff8fd url(images/arr.png) no-repeat 9px 8px;border:3px solid #91d7f9;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
#butcall:hover{cursor:pointer;-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
#mssgresbox{color:#29AEE3;font-size:20px;text-align:center;vertical-align: middle;line-height:80px;}
#pop_up_bl{position:fixed;right:10px;bottom:25px;z-index:999998;max-height:120px;max-width:425px;font-family: 'Open Sans', sans-serif;}
a#setсookieph{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;display:block;position:absolute;top:10px;right:0;width:20px;height:20px;background:url(images/close.png)no-repeat center 4px;z-index:999999;-webkit-transition:all 0ms;-o-transition:all 0ms;-moz-transition:all 0ms;transition:all 0ms;}
a#setсookieph:hover{background:rgba(219,241,254, 0.84) url(images/close.png) center -24px no-repeat;cursor:pointer;}

#content1 input[type="tel"]{height:100%;}
#content1 input[type="email"]{height:100%;}
input[type="email"].hidden_in{display:none;}
#pop_up_bl a.close {opacity: 1;}

@media (max-width: 450px) {
#content1{height:60px;margin:35px 0 0 -90px;padding:0 17px 0 60px;bottom:0;}
#tele_phone_call{width:120px;height:25px;line-height:25px;margin:12px 0 12px 0;font-size:18px;padding:2px 5px 3px;}
#tele_phone_call::-webkit-input-placeholder {font-size:9px;line-height:25px;}
#tele_phone_call::-moz-placeholder {font-size:9px;line-height:25px;}
#tele_phone_call:hover::-webkit-input-placeholder {color:transparent;}
#tele_phone_call:hover::-moz-placeholder {color:transparent;}
#labtelcal{bottom:27px;right:70px;}
#butcall{width:32px;height:36px;line-height:32px;background:#eff8fd url(images/arr.png) no-repeat 4px 4px;}
#butcall:hover{cursor:pointer;}
#mssgresbox{font-size:14px;line-height:60px;}
#pop_up_bl{right:50%;margin-right:-145px;max-width:300px;bottom:0;}
}

http://gnatkovsky.com.ua/test/wp-content/plugins/ph_call_gnat2/phon_call.css?ver=all

(0) Твой сайт на каком движке?

Сейчас css анимацию поддерживает.

Народ, вот, на чистом css вытворяет:
http://webdesign.tutsplus.com/articles/15-inspiring-examples-of-css-animation-on-codepen--cms-23937

а кто выложит исходник бекенда? подсказка: оно на php.

(16) wordpress?

(16) Зачем он нужен?

А плугин можно найти. Называется ph_call_gnat2 )))

Хм, интересно, насколько повышается PR, ТиЦ, при размещении ссылки на мизде? Может свой сайт с невинным вопросом прокачат за счет миздян?

(19) ни насколько. (кроме рекламных)

(19) Не поможет.
там стоит rel=nofollow

===========
Как Google обрабатывает ссылки с запрещенным переходом?

Как правило, переход не производится. Это означает, что по этим ссылкам Google не передает ни PageRank, ни текст ссылки. Благодаря nofollow ссылки не попадают в нашу "схему" Сети. Однако соответствующие целевые страницы все равно могут быть включены в индекс Google, если другие сайты ссылаются на них без использования nofollow или если их URL предоставлены Google с помощью файла Sitemap. Необходимо заметить, что другие поисковые системы могут обрабатывать nofollow несколько по-другому.

(19) смотря какая так посещаемость у сайта, для мелких/неизвестных очень нехило повышает

(20,21)Печаль, бида. Почему тогда банять явные спам темы, если профита от размешения ссылки на мисте нет?
(22)тут, скорее, соглашусь.

(23) мы милосердно защищаем сайты от хабрамистаэффекта.

(22) Это единичный всплеск и только. На поисковую эффективность это не влияет никак.

(25)Кстати, пока в теме, вопрос, который еще "великий маня" подымал, будет секция по битриксу на мисте или нет? Техподдержка и партнерский форум скорее мертвы, чем живы, а тут будет повод обсудить и проблемы битрикса и проблемы возникающие в процессе настройки 1С<->Битрикс, ну и живые идеи будут всплывать, все лучше, чем ничего.

А вообще, ТС лентяй. На том сайте даже статья есть про эту кнопку.

(26) Есть секция веб-мастеринг. Будет потребность в отдельной секции по Битриксу — сделаем секцию по битриксу.