<style>

.pulse-btn {

position: relative;

padding: 16px 32px;

font-size: 16px;

font-weight: 600;

color: #ffffff;

background: linear-gradient(135deg, #007bff, #0056b3);

border: none;

border-radius: 8px;

cursor: pointer;

overflow: hidden;

z-index: 1;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

transition: transform 0.2s ease;

}

.pulse-btn:hover {

transform: translateY(-2px);

}

/* Первая пульсация */

.pulse-btn::before {

content: '';

position: absolute;

top: 99%;

left: 0%;

width: 100px;

height: 100px;

background: #ffffff;

border-radius: 50%;

opacity: 0.4;

transform: translate(-50%, -50%) scale(0);

animation: pulse-pulse-btn-1 2s infinite ease-out;

z-index: -1;

}

/* Вторая пульсация */

.pulse-btn::after {

content: '';

position: absolute;

top: 20%;

left: 100%;

width: 150px;

height: 150px;

background: #ffffff;

border-radius: 50%;

opacity: 0.2;

transform: translate(-50%, -50%) scale(0);

animation: pulse-pulse-btn-2 2.5s infinite ease-out 0.5s;

z-index: -1;

}

/* Анимация пульсации 1 */

@keyframes pulse-pulse-btn-1 {

0% {

transform: translate(-50%, -50%) scale(0);

opacity: 0.4;

}

50% {

opacity: 0.2;

}

100% {

transform: translate(-50%, -50%) scale(1.5);

opacity: 0;

}

}

/* Анимация пульсации 2 */

@keyframes pulse-pulse-btn-2 {

0% {

transform: translate(-50%, -50%) scale(0);

opacity: 0.2;

}

50% {

opacity: 0.1;

}

100% {

transform: translate(-50%, -50%) scale(1.5);

opacity: 0;

}

}

</style>