Пошук по сайту

Это всего лишь кнопка, а не модуль.... Пример реализации: http://pro100max.ru/bootstrap/callback.html Как поставить на сайт HTML код = вставляем в любое место <!-- Callback --> <div class="callback hidden-xs"> <a class="callback_link" data-toggle="modal" data-target="#myModal"> <div class="callback_block"><div class="callback_a"></div><div class="callback_b"></div></div> </a> </div> <!-- End Callback --> CSS код /************************************************************************************/ /* Callback /************************************************************************************/ .callback {background: #09f; border-radius: 50% !important; bottom: 40px; cursor: move; height: 50px; position: fixed; right: 40px; width: 50px; z-index: 9999; cursor:pointer;} .callback .callback_link::before {background: rgba(0, 0, 0, 0) url(../images/phone.png) no-repeat scroll center center / 35px auto; content: ""; height: 50px; left: 0; position: absolute; top: 0; width: 50px; z-index: 11;} .callback:hover {animation: 1.5s linear 0s normal none infinite running callback_anim;} .callback:hover .callback_b, .callback:hover .callback_a {background-color: #09f; border-color: #09f;} .callback .callback_block {height: 50px; position: absolute; width: 50px;} .callback .callback_a {-webkit-animation: callback 3s linear 0s infinite; -moz-animation: callback 3s linear 0s infinite; animation: callback 3s linear 0s infinite; background-color: transparent; border: 2px solid #09f; border-radius: 100% !important; bottom: -25px; box-sizing: border-box; height: 100px; opacity: 0.01; position: absolute; right: -25px; width: 100px;} .callback .callback_b {-webkit-animation: callback 1.5s linear 0s infinite; -moz-animation: callback 1.5s linear 0s infinite; animation: callback 1.5s linear 0s infinite; background-color: transparent; border: 2px solid #09f; border-radius: 100% !important; bottom: -25px; box-sizing: border-box; height: 100px; opacity: 0.01; position: absolute; right: -25px; width: 100px;} @keyframes callback { 0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);} 10% {transform: rotate(0deg) scale(0.56) skew(1deg);} 100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);} } @-webkit-keyframes callback { 0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);} 10% {transform: rotate(0deg) scale(0.56) skew(1deg);} 100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);} } @-moz-keyframes callback { 0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);} 10% {transform: rotate(0deg) scale(0.56) skew(1deg);} 100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);} } @keyframes callback_anim { 0% {transform: scale3d(1, 1, 1);} 10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);} 30%, 50%, 70%, 90% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);} 40%, 60%, 80% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);} 100% {transform: scale3d(1, 1, 1);} } @keyframes callback_anim { 0% {transform: scale3d(1, 1, 1);} 10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);} 30%, 50%, 70%, 90% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);} 40%, 60%, 80% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);} 100% {transform: scale3d(1, 1, 1);} } Как поменять цвет Найти и заменить в CSS = #09f на Ваш цвет #660000 Замена изображения на свое Скачать кнопку = http://pro100max.ru/bootstrap/images/phone.png Либо оставьте ее, либо рисуйте сами)))... Внимательно с путями к изображению в CSS.... P.S. Данную кнопку можно прикрутить к любому модулю обратного звонка.... В примере реализации прикручено модальное окно...