@property --clr-start{syntax: "<color>"; initial-value: transparent; inherits: false;}@property --clr-end{syntax: "<color>"; initial-value: transparent; inherits: false;}.button{cursor:pointer;padding:16px;border:unset;border-radius:64px;font-weight:700;font-size:20px;text-align:center;background:linear-gradient(to bottom right,var(--clr-start),var(--clr-end));transition:--clr-start 125ms ease-in-out,--clr-end 125ms ease-in-out,color 125ms}.button.red{--clr-start: var(--clr-1);--clr-end: var(--clr-1)}.button.orange{--clr-start: var(--clr-2);--clr-end: var(--clr-2)}.button.yellow{--clr-start: var(--clr-3);--clr-end: var(--clr-3)}.button.green{--clr-start: var(--clr-4);--clr-end: var(--clr-4)}.button.cyan{--clr-start: var(--clr-5);--clr-end: var(--clr-5)}.button.blue{--clr-start: var(--clr-6);--clr-end: var(--clr-6)}.button.purple{--clr-start: var(--clr-7);--clr-end: var(--clr-7)}.button.pink{--clr-start: var(--clr-8);--clr-end: var(--clr-8)}.button.gradient\:b2pu{--clr-start: var(--clr-6);--clr-end: var(--clr-7)}.button.hover\:red:hover{--clr-start: var(--clr-1);--clr-end: var(--clr-1)}.button.hover\:orange:hover{--clr-start: var(--clr-2);--clr-end: var(--clr-2)}.button.hover\:yellow:hover{--clr-start: var(--clr-3);--clr-end: var(--clr-3)}.button.hover\:green:hover{--clr-start: var(--clr-4);--clr-end: var(--clr-4)}.button.hover\:cyan:hover{--clr-start: var(--clr-5);--clr-end: var(--clr-5)}.button.hover\:blue:hover{--clr-start: var(--clr-6);--clr-end: var(--clr-6)}.button.hover\:purple:hover{--clr-start: var(--clr-7);--clr-end: var(--clr-7)}.button.hover\:pink:hover{--clr-start: var(--clr-8);--clr-end: var(--clr-8)}.button.hover\:gradient\:b2pu:hover{--clr-start: var(--clr-6);--clr-end: var(--clr-7)}