.button{position:relative;padding:0!important;border:none;border-radius:26px}.button-content{padding:1rem 2rem;font-size:1.2rem;border-radius:26px;cursor:pointer;border:none;color:#fff;font-weight:600;transition:all .2s ease;font-family:Nunito,sans-serif;transition:transform .2s ease;transform:translateY(-4px);background-color:#9956de;display:inline-block}.button:active .button-content{transform:translateY(0)}.button.md .button-content{padding:1rem 2rem;font-size:1.2rem}.button.sm .button-content{padding:.5rem 1rem;font-size:1rem}.button.lg .button-content{padding:1.5rem 3rem;font-size:1.5rem}:root{--purple: #9956DE;--blue: #7274ED;--cyan: #1FA7E1;--teal: #6ED1CF;--green: #75D06A;--orange: #FFB356;--coral: #FF8B8B;--pink: #FB96BB}.button{background-color:var(--base-color);background-color:lch(from var(--base-color) calc(l - 20) c h)}.button .button-content{background-color:var(--base-color)}.button.purple{--base-color: var(--purple)}.button.blue{--base-color: var(--blue)}.button.cyan{--base-color: var(--cyan)}.button.teal{--base-color: var(--teal)}.button.green{--base-color: var(--green)}.button.orange{--base-color: var(--orange)}.button.coral{--base-color: var(--coral)}.button.pink{--base-color: var(--pink)}