Виджет Анимированная кнопка звонка в Elementor
Кнопка виджет своими руками за 5 минут!
<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>
.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);
}
}
Описание реализации
принцип реализации