@keyframes clicked_before {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    16.667% {
        -webkit-transform: rotate(10deg) scale(0.2);
        -ms-transform: rotate(10deg) scale(0.2);
        transform: rotate(10deg) scale(0.2);
        background:
                radial-gradient(circle closest-side at 4px, var(--color) 3px, transparent 4px),
                radial-gradient(circle closest-side at calc(100% - 4px), var(--color) 3px, transparent 4px);
    }
    33.336% {
        -webkit-transform: rotate(20deg) scale(1);
        -ms-transform: rotate(20deg) scale(1);
        transform: rotate(20deg) scale(1);
        background:
                radial-gradient(circle closest-side at 3px, var(--color) 2px, transparent 3px),
                radial-gradient(circle closest-side at calc(100% - 3px), var(--color) 2px, transparent 3px);
    }
    66.667% {
        -webkit-transform: rotate(340deg) scale(1);
        -ms-transform: rotate(340deg) scale(1);
        transform: rotate(340deg) scale(1);
        background:
                radial-gradient(circle closest-side at 3px, var(--color) 2px, transparent 3px),
                radial-gradient(circle closest-side at calc(100% - 3px), var(--color) 2px, transparent 3px);
    }
    83.336% {
        -webkit-transform: rotate(350deg) scale(0.2);
        -ms-transform: rotate(350deg) scale(0.2);
        transform: rotate(350deg) scale(0.2);
        background:
                radial-gradient(circle closest-side at 4px, var(--color) 3px, transparent 4px),
                radial-gradient(circle closest-side at calc(100% - 4px), var(--color) 3px, transparent 4px);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
@keyframes clicked_after {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    16.667% {
        -webkit-transform: rotate(10deg) scale(0.2);
        -ms-transform: rotate(10deg) scale(0.2);
        transform: rotate(10deg) scale(0.2);
        background:
                radial-gradient(circle closest-side at 50% 4px, var(--color) 3px, transparent 4px),
                radial-gradient(circle closest-side at 50% calc(100% - 4px), var(--color) 3px, transparent 4px);
    }
    33.336% {
        -webkit-transform: rotate(20deg) scale(1);
        -ms-transform: rotate(20deg) scale(1);
        transform: rotate(20deg) scale(1);
        background:
                radial-gradient(circle closest-side at 50% 3px, var(--color) 2px, transparent 3px),
                radial-gradient(circle closest-side at 50% calc(100% - 3px), var(--color) 2px, transparent 3px);
    }
    66.667% {
        -webkit-transform: rotate(340deg) scale(1);
        -ms-transform: rotate(340deg) scale(1);
        transform: rotate(340deg) scale(1);
        background:
                radial-gradient(circle closest-side at 50% 3px, var(--color) 2px, transparent 3px),
                radial-gradient(circle closest-side at 50% calc(100% - 3px), var(--color) 2px, transparent 3px);
    }
    83.336% {
        -webkit-transform: rotate(350deg) scale(0.2);
        -ms-transform: rotate(350deg) scale(0.2);
        transform: rotate(350deg) scale(0.2);
        background:
                radial-gradient(circle closest-side at 50% 4px, var(--color) 3px, transparent 4px),
                radial-gradient(circle closest-side at 50% calc(100% - 4px), var(--color) 3px, transparent 4px);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

.button.clicked { color: transparent !important; }
.button.clicked:before {
    background:
            radial-gradient(circle closest-side at 4px, var(--color) 3px, transparent 4px),
            radial-gradient(circle closest-side at calc(100% - 4px), var(--color) 3px, transparent 4px);
    animation: clicked_before 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.button.clicked:after {
    background:
            radial-gradient(circle closest-side at 50% 4px, var(--color) 3px, transparent 4px),
            radial-gradient(circle closest-side at 50% calc(100% - 4px), var(--color) 3px, transparent 4px);
    animation: clicked_after 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.button.clicked:before, .button.clicked:after {
    --color: #d8003f;
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    left: calc(50% - 11px);
    top: calc(50% - 11px);
    content: '';
    right: auto;
}

.button.red.clicked:before, .button.red.clicked:after { --color: #fff; }
.button.purple.clicked:before, .button.purple.clicked:after { --color: #7000ff; }
.button.black.clicked:before, .button.black.clicked:after { --color: #fff; }
.button.red-bord.clicked:before, .button.red-bord.clicked:after { --color: #d8003f; }
.button.yellow.clicked:before, .button.yellow.clicked:after { --color: #000; }
.button.yellow-bord.clicked:before, .button.yellow-bord.clicked:after { --color: #e2cd88; }
.button.yellow-white.clicked:before, .button.yellow-white.clicked:after { --color: #fff; }
.button.blue.clicked:before, .button.blue.clicked:after { --color: #fff; }
.button.blue-bord.clicked:before, .button.blue-bord.clicked:after { --color: #1a3a53; }
.button.green.clicked:before, .button.green.clicked:after { --color: #fff; }
.button.green-bord.clicked:before, .button.green-bord.clicked:after { --color: #1cbba5; }
.button.dark-blue.clicked:before, .button.dark-blue.clicked:after { --color: #fff; }
.button.dark-blue-bord.clicked:before, .button.dark-blue-bord.clicked:after { --color: #0b1b27; }
.button.blue-white-bord.clicked:before, .button.blue-white-bord.clicked:after { --color: #fff; }
.button.white-bord.clicked:before, .button.white-bord.clicked:after { --color: #fff; }
.button.black-bord.clicked:before, .button.black-bord.clicked:after { --color: #0c0c0c; }
.button.white.clicked:before, .button.white.clicked:after { --color: #0c0c0c; }