pkg-components/stories/atoms/Button/button.module.css

.button {
    border-radius: 2.1875rem;
    outline: none;
    border: none;
    position: relative;
    padding: 20px;
    color: var(--color-text-black);
    font-family: PFont-Light;
}

.button:disabled {
    background-color: var(--color-primary-pink-light);
    border: 1px solid var(--color-primary-pink-light);
}

.button-secondary {
    border-radius: 2.1875rem;
    background: var(--color-primary-green-gradient-button);
}

.button--primary {
    background: var(--color-primary-red);
    border: 1px solid var(--color-primary-red);
}

.button--secondary {
    background: var(--color-base-white);
    border: 1px solid var(--color-primary-red);
}

.button--border-gray {
    border: 1px solid var(--color-neutral-gray-dark);
}

.button--border-none {
    border: none;
}

.button--white {
    color: var(--color-text-white);
}

.button--black {
    color: var(--color-text-black) !important;
}


.loadingWrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 5px;
}

.loadingWrapper svg {
    animation: rotate 1s linear infinite;
}

.button--none {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text-black);
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}