@-webkit-keyframes ripple-animation {
    0% {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes ripple-animation {
    0% {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: 0;
    }
}

.buttonWrapper {
    position: relative;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.label{
    position: absolute;
    width: 64px;
    height: 22px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    z-index: 999;
    color: #FFFFFF;
}

.innerWrapper {
    width: 125.62px;
    height: 125.62px;
}

.innerRing {
    position: absolute;
    width: 125.62px;
    height: 125.62px;
    left: calc(50% - 62.81px);
    top: calc(50% - 62.81px);

    background: -webkit-gradient(linear, left top, left bottom, from(#D6E2FF), to(#F7FBFF));

    background: -webkit-linear-gradient(top, #D6E2FF 0%, #F7FBFF 100%);

    background: linear-gradient(180deg, #D6E2FF 0%, #F7FBFF 100%);
    border-radius: 50%;
}


.circleWrapper {
    position: absolute;
    width: 112.5px;
    height: 112.5px;
    left: calc(50% - 56.25px);
    top: 18.75px;
}

.innerShadow {
    -webkit-box-shadow: inset 0px -6.81818px 6.81818px #486EED;
            box-shadow: inset 0px -6.81818px 6.81818px #486EED;
}

.circle {
    width: 112.5px;
    height: 112.5px;
    position: absolute;
    background: -webkit-linear-gradient(234.36deg, #8DA8FF 22.9%, #5376E7 80.16%);
    background: linear-gradient(215.64deg, #8DA8FF 22.9%, #5376E7 80.16%);
    border-radius: 50%;
}

.highlights {
    position: absolute;
    left: 15%;
    top: 0;
    background: -webkit-radial-gradient(81.63% 65.56% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    background: radial-gradient(81.63% 65.56% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    width: 78.75px;
    height: 50.625px;
    opacity: 0.9;
    border-radius: 100px / 65px;
}

.outerRing {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    width: 150px;
    height: 150px;
    left: calc(50% - 75px);
    top: calc(50% - 75px);
    border: 3.75px solid #E1EAFF;
    border-radius: 50%;
    -webkit-animation: ripple-animation 2s infinite ease-out;
            animation: ripple-animation 2s infinite ease-out;
}