.btn {
    --hue: 190;
    text-decoration: none;
    outline: transparent;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: 0.25s;
}
.btn:hover {
    background: hsl(var(--hue), 100%, 31%);
    /*border:1px solid hsl(var(--hue), 100%, 31%);*/
}
.btn-primary {
    --hue: 193;
}
.btn-ghost {
    background-color: transparent;
}
.btn-ghost:hover {
    color: white !important;
    background: hsl(var(--hue), 100%, 41%);
}
.btn-jittery {
    animation: jittery 4s infinite;
}
.btn-finger {
    overflow: visible;
}
.btn-finger::before {
    position: absolute;
    content: "👇";
    top: -68px;
    right: 0;
    font-size: 60px;
    transform: scaleX(-1);
    animation: up-down 1s infinite;
}
.btn-icon {
    position: relative;
    margin-left: 8px;
}
.btn-icon i {
    position: absolute;
    top: 10%;
    left: 40%;
    transform: translate(-16%, 400%);
    transition: 0.2s;
}
.btn-icon span {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}
.btn-icon:hover i {
    transform: translate(-16%, 42%);
}
.btn-icon:hover span {
    transform: translateY(-400%);
}
.btn-jelly:hover {
    animation: jelly 0.5s;
}
.btn-fill:hover {
    background: transparent;
    box-shadow: 0 0 0 2em hsl(var(--hue), 100%, 41%) inset;
}
.btn-pulse:hover {
    box-shadow: 0 0 0 1em transparent;
    animation: pulse 1s;
}
.btn-shock {
    background: transparent;
    border-color: transparent;
    overflow: visible;
}
.btn-shock:hover {
    background: transparent;
}
.btn-shock::before, .btn-shock::after {
    position: absolute;
    content: "";
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: inherit;
    border-radius: inherit;
    transition: 0.3s;
}
.btn-shock::before {
    z-index: -1;
    background: hsl(var(--hue), 100%, 41%);
}
.btn-shock::after {
    z-index: -2;
    background: #222;
    border-color: hsl(var(--hue), 100%, 41%);
    transform: scale(0.5);
}
.btn-shock:hover {
    color: hsl(var(--hue), 100%, 41%);
}
.btn-shock:hover::before {
    opacity: 0;
    transform: scale(1.2);
}
.btn-shock:hover::after {
    transform: scale(1);
}
.btn-open::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleX(0);
    transition: 0.25s;
}
.btn-open:hover {
    background: transparent;
}
.btn-open:hover::before {
    transform: scaleX(1);
}
.btn-close:hover {
    background: transparent;
    box-shadow: inset 3em 0 0 0 hsl(var(--hue), 100%, 41%), inset -4em 0 0 0 hsl(var(--hue), 100%, 41%);
}
.btn-slash::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 120%;
    height: 200%;
    background: hsl(var(--hue), 100%, 41%);
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
    transition: 0.25s;
}
.btn-slash:hover {
    background: transparent;
}
.btn-slash:hover::before {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}
.btn-fill-up:hover {
    background: transparent;
    box-shadow: inset 0 -4em 0 0 hsl(var(--hue), 100%, 41%);
}
.btn-slide:hover {
    background: transparent;
    box-shadow: inset 4em 0 0 0 hsl(var(--hue), 100%, 41%);
}
.btn-offset {
    border-radius: 0;
    box-shadow: 0.3em 0.3em 0 0 hsl(var(--hue), 100%, 41%), inset 0.3em 0.3em 0 0 hsl(var(--hue), 100%, 41%);
}
.btn-offset:hover {
    --hue: 193;
    background: transparent;
    box-shadow: 0 0 0 0 hsl(var(--hue), 100%, 41%), inset 6em 4em 0 0 hsl(var(--hue), 100%, 41%);
}
.btn-flip-down {
    --flip-button-height:40px;
    height: var(--flip-button-height);
    color: transparent;
    border: none;
    border-radius: 0;
    perspective: 500px;
    overflow: visible;
}
.btn-flip-down:hover {
    color: transparent;
    background: transparent;
}
.btn-flip-down .front,
.btn-flip-down .back {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.btn-flip-down .front {
    background: hsl(var(--hue), 100%, 41%);
    color: white;
    transition: 0.25s;
    transform-origin: center center calc(var(--flip-button-height) / -2);
}
.btn-flip-down .back {
    --hue: 196;
    color: white;
    background: hsl(var(--hue), 100%, 41%);
    transform: rotateX(88deg);
    transform-origin: center center calc(var(--flip-button-height) / -2);
    transition: 0.25s;
}
.btn-flip-down:hover .front {
    transform: rotateX(-90deg);
}
.btn-flip-down:hover .back {
    transform: rotateX(0deg);
}
.btn-breach {
    border-width: 4px;
    border-radius: 0;
    overflow: visible;
}
.btn-breach::before, .btn-breach::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 4px;
    background: #222;
    transform: skewX(60deg);
    transition: 0.4s linear;
}
.btn-breach::before {
    top: -4px;
    left: 10%;
}
.btn-breach::after {
    bottom: -4px;
    right: 10%;
}
.btn-breach:hover {
    color: hsl(var(--hue), 100%, 41%);
    background: transparent;
}
.btn-breach:hover::before {
    transform: translateX(360%) skewX(60deg);
}
.btn-breach:hover::after {
    transform: translateX(-360%) skewX(60deg);
}
.btn-marquee {
    font-weight: 600;
    border: none;
    border-radius: 1.5rem;
}
.btn-marquee:hover {
    --hue: 230;
    transform: scale(1.1);
}
.btn-marquee span {
    display: block;
    padding: 0 20px;
    animation: move-left 2s linear infinite;
}
.btn-marquee span::after {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.btn-cross {
    border-radius: 1.5rem;
}
.btn-cross::before, .btn-cross::after {
    position: absolute;
    content: "";
    left: 0;
    z-index: -1;
    width: 100%;
    height: 50%;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleX(0);
    transition: transform 0.5s;
}
.btn-cross::before {
    top: 0;
    transform-origin: left;
}
.btn-cross::after {
    top: 50%;
    transform-origin: right;
}
.btn-cross:hover {
    background: transparent;
}
.btn-cross:hover::before, .btn-cross:hover::after {
    transform: scaleX(1);
}
.btn-cross:hover::before {
    transform-origin: right;
}
.btn-cross:hover::after {
    transform-origin: left;
}
.btn-open-line {
    border: none;
    overflow: visible;
}
.btn-open-line::before, .btn-open-line::after {
    position: absolute;
    content: "";
    left: 0;
    width: 100%;
    height: 1px;
    background: hsl(var(--hue), 100%, 41%);
    opacity: 0;
    transform: scaleX(0);
    transition: 0.4s ease-in-out;
}
.btn-open-line::before {
    top: 0;
}
.btn-open-line::after {
    bottom: 0;
}
.btn-open-line:hover {
    letter-spacing: 5px;
    color: hsl(var(--hue), 100%, 41%);
    background: transparent;
}
.btn-open-line:hover::before, .btn-open-line:hover::after {
    opacity: 1;
    transform: scaleX(1.2);
}

@keyframes jittery {
    5%, 50% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9);
    }
    15% {
        transform: scale(1.15);
    }
    20% {
        transform: scale(1.15) rotate(-5deg);
    }
    25% {
        transform: scale(1.15) rotate(5deg);
    }
    30% {
        transform: scale(1.15) rotate(-3deg);
    }
    35% {
        transform: scale(1.15) rotate(2deg);
    }
    40% {
        transform: scale(1.15) rotate(0);
    }
}
@keyframes up-down {
    50% {
        transform: translateY(-20px) scaleX(-1);
    }
}
@keyframes jelly {
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}
@keyframes pulse {
    from {
        box-shadow: 0 0 0 0 hsl(var(--hue), 100%, 41%);
    }
}
@keyframes move-left {
    to {
        transform: translateX(-100%);
    }
}