.wc-btn {
    text-transform: uppercase;
    border-radius: 50rem;
    font-weight: bold;
    padding: 0.5rem 2rem;
    text-decoration: none;
    border: none;
    outline: none;
    transition: all ease 300ms;
}

.gr-btn-1 {
    background: var(--wc-green);
    background-size: 100%;
    background-position: center center;
    font-size: 1.2rem;
    color: var(--wc-white);
    transition: all ease 300ms;
}

.gr-btn-1:hover {
    background: var(--wc-green-2);
    color: var(--wc-white);
    letter-spacing: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.gr-btn-2 {
    background-size: 100%;
    background: var(--wc-white);
    background-position: center center;
    color: var(--wc-light-dark);
    transition: all ease 300ms;
    position: relative;
}

.gr-btn-2.active {
    background: linear-gradient(to right, var(--wc-green), var(--wc-green-2));
    color: var(--wc-white);
}

.gr-btn-2:not(.active):hover {
    background: var(--wc-green-2);
    background: var(--wc-green);
    color: var(--wc-white);
    transform: scale(1.05);
}

.gr-btn-2::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -1rem;
    width: calc(100% + 2rem);
    aspect-ratio: 1;
    z-index: -1;
}

.gr-btn-2.active::after {
    z-index: -1;
    background: conic-gradient(var(--wc-white) 20%, transparent 20%,  transparent 60%, var(--wc-white) 60%, var(--wc-white) 80%, transparent 80%);
    animation: active-btn linear 2s infinite;
}

.so-btn-1 {
    background: var(--wc-white);
    color: var(--wc-light-dark);
    transition: all ease 300ms;
}

.so-btn-1:hover {
    background: var(--wc-green);
    color: var(--wc-white);
}

.dark-btn {
    background: var(--wc-dark);
    color: var(--wc-white);
}

.dark-btn:hover {
    color: var(--wc-dark);
    background: var(--wc-white);
}

@keyframes active-btn {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}