Видео:
https://www.youtube.com/watch?v=_I9CwnJiTZ0
HTML Код
<body>
<a href="Ваша ссылка на всплывающее окно">
<wrapper>
<div class="animate-pulse2">
<div class="vidualsatun">
<div class="campakesad">
<div class="vebusines"></div>
<div class="nigkugas"><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="dsacin">
Заказать звонок
</div>
</div>
</div>
</div>
</a>
</wrapper>
</body> CSS Код
.vidualsatun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: animate_pulse2 2s infinite;
border-radius: 100px;
}
.campakesad, .vebusines, .nigkugas {
position: absolute;
width: 70px;
height: 70px;
color: #fff;
text-align: center;
border-radius: 50%;
}
.vebusines {
cursor: pointer;
z-index: 1;
overflow: hidden;
}
.campakesad {
background: #00BD15;
position: relative;
transition: .5s;
}
.nigkugas {
font-size: 28px;
line-height: 70px;
animation: phone .9s ease-in-out infinite;
}
.dsacin {
position: absolute;
opacity: 0;
text-transform: uppercase;
font-weight: 500;
top: 18px;
font-size: 12px;
transform: scaleX(-1);
transition: .5s ease-in-out;
}
.nigkugas i {
transition: .5s ease-in-out;
}
.campakesad:hover {
background: #00BD15;
}
.campakesad:hover i {
transition: .5s ease-in-out;
transform: scale(0);
}
.campakesad:hover .dsacin {
transform: scaleX(1);
transition: .5s ease-in-out;
opacity: 1;
}
.campakesad:hover::before,
.campakesad:hover::after {
content: '';
position: absolute;
border: 1px solid #green;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
border-radius: 50%;
animation: pulse 1.8s linear infinite;
opacity: 0;
}
.campakesad:hover::after {
animation-delay: .5s;
}
@keyframes phone {
0%, 100% {
transform: rotate(-20deg);
}
50% {
transform: rotate(21deg);
}
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes animate_pulse2 {
0% {
box-shadow: 0 0 0 0 rgba(0, 189, 31, 0.67);
}
70% {
box-shadow: 0 0 0 20px rgba(0, 189, 31, 0.27);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 189, 31, 0.17);
}
Спасибо, виджет выглядит хорошо. Но предложенная вами система позиционирования не позволяет правильно располагать кнопку на устройствах с различными разрешениеми экрана. То, что расположено уместно в 1920×1080, исчезает при разрешении 1366х768 и т.д. Добиться хорошего расположения на различных разрешениях экрана мне не удалось. Ещё один момент. Хорошо когда при взгляде на кнопку пользователь сразу понимает, что речь идёт именно об обратном звонке, а не о том, что он сам может позвонить (у вас для этого нужно навести курсор на объект — мобильных устройствах это не работает). Т.е. периодические самостоятельные перевороты кномпки, на мой взгляд, улучшили бы виджет.
Да есть не доработки в этом плане к сожалению