• 80
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Один из заказчиков попросил сделать пульсирующую анимированную кнопку "Записаться". Ну поскольку там ничего сложного нет ,да и вариантов таких кнопок много , решил поделиться своим опытом.

И так приступим:
Кнопка будет у нас фиксированная ,состоит из трех блоков и ссылки, добавляем код в тот файл где нам нужна эта кнопка.

Код:
<a id="popup__toggle" href="Здесь ссылка куда ссылаться"title="Записаться на массаж" target="_blank"><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></a>
Весь текст можете заменить на свой,ссылку добавить не забудьте.
Теперь в файл стилей добавляем стили кнопки:
Код:
#popup__toggle{bottom:10%;right:10px;position:fixed;z-index:9999;}
.img-circle{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 #0fef0f;width:150px;height:150px;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:#15e638;width:100px;height:100px;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{bottom: 16px;right: 50px;position: absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 50%; text-decoration: none;padding: 23px 6px;color: white;}
.img-circle:hover{opacity: 1; background-color: #298de3;}
@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;}}
Цвета кнопки и пульсаций легко меняются.

Можешь почитать и вот эту статейку "Настройка плагина breadcrumbs - "Хлебных крошек""

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Вы нашли что искали?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element