.playful-button.alternative {
    --color-hover: #000000;   /* Text color */
    --background: #EB1C22;    /* Main color */
    --hover-back: #EB1C22;    /* While hover */
    --hover-front: #F6F8FF;   /* End Hover */
}

.playful-button.white {
    --color: #EB1C22;
    --color-hover: #FFFFFF;
    --background: #FFFFFF;
    --background-hover: #EB1C22;
    --hover-front: #EB1C22;
}

.playful-button.download {
    --color: #000000;
    --background: #FFFFFF;
    --background-hover: #FFFFFF;
    --hover-back: #FFFFFF;
    --hover-front: #FFFFFF
}

.playful-button.contact-us {
    --color: #EB1C22;
    --background: #FFFFFF;
    --background-hover: #FFFFFF;
    --hover-back: #FFFFFF;
    --hover-front: #FFFFFF
}

.playful-button.simple {
    --background: #EB1C22;
    --background-hover: #9C0001;
}

.playful-button {
    --color: #FFF;
    --color-hover: var(--color);
    --background: #EB1C22;
    --background-hover: var(--background);
    --hover-back: #EB1C22;
    --hover-front: #FF0000;
    padding: 13px 69px;
    border-radius: 30px;
    line-height: 24px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .02em;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    color: var(--c, var(--color));
    background: var(--b, var(--background));
    -webkit-transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
    transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
}

    .playful-button:not(.simple):before, .playful-button:not(.simple):after {
        content: '';
        position: absolute;
        background: var(--pb, var(--hover-back));
        top: 0;
        left: 0;
        right: 0;
        height: 200%;
        border-radius: var(--br, 40%);
        -webkit-transform: translateY(var(--y, 50%));
        transform: translateY(var(--y, 50%));
        -webkit-transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
        transition: border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
        transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s);
        transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s), -webkit-transform var(--d, 0.4s) ease-in var(--d-d, 0s);
    }

    .playful-button:not(.simple):after {
        --pb: var(--hover-front);
        --d: .44s;
    }

    .playful-button div {
        z-index: 1;
        position: relative;
        display: -webkit-box;
        display: flex;
    }

        .playful-button div span {
            display: block;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: var(--name, none) 0.7s linear forwards 0.18s;
            animation: var(--name, none) 0.7s linear forwards 0.18s;
        }

    .playful-button.in {
        --name: move;
    }

        .playful-button.in:not(.out) {
            --c: var(--color-hover);
            --b: var(--background-hover);
        }

            .playful-button.in:not(.out):before, .playful-button.in:not(.out):after {
                --y: 0;
                --br: 5%;
            }

            .playful-button.in:not(.out):after {
                --br: 10%;
                --d-d: .02s;
            }

        .playful-button.in.out {
            --name: move-out;
        }

            .playful-button.in.out:before {
                --d-d: .06s;
            }

@-webkit-keyframes move {
    30%, 36% {
        -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
        transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
    }

    50% {
        -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
        transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
    }

    70% {
        -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
        transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
    }
}

@keyframes move {
    30%, 36% {
        -webkit-transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
        transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
    }

    50% {
        -webkit-transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
        transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
    }

    70% {
        -webkit-transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
        transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
    }
}

@-webkit-keyframes move-out {
    30%, 36% {
        -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
        transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
    }

    50% {
        -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
        transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
    }

    70% {
        -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
        transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
    }
}

@keyframes move-out {
    30%, 36% {
        -webkit-transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
        transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
    }

    50% {
        -webkit-transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
        transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
    }

    70% {
        -webkit-transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
        transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
    }
}