.red-button{--c100: #D93025;--c90: #c42b21;--c80: #af261d;--c70: #9a2119;--chl: #f06a5d;background:linear-gradient(0deg,var(--c90) 0%,var(--c100) 80%,var(--chl) 100%);box-shadow:3px 3px 3px #00000080}.green-button{--c100: #3a8f3a;--c90: #348034;--c80: #2e712e;--c70: #286328;--chl: #6bc26b;background:linear-gradient(0deg,var(--c90) 0%,var(--c100) 80%,var(--chl) 100%);box-shadow:3px 3px 3px #00000080}.blue-button{--c100: #2196c4;--c90: #1d87b1;--c80: #19789e;--c70: #15698b;--chl: #5ec0e6;background:linear-gradient(0deg,var(--c90) 0%,var(--c100) 80%,var(--chl) 100%);box-shadow:3px 3px 3px #00000080}.orange-button{--c100: #E8A020;--c90: #d1901c;--c80: #ba8019;--c70: #a37015;--chl: #f5c86a;background:linear-gradient(0deg,var(--c90) 0%,var(--c100) 80%,var(--chl) 100%);color:#000}.red-button:hover{background:linear-gradient(0deg,var(--c80),var(--c90))}.red-button:active{background:linear-gradient(0deg,var(--c70),var(--c80))}.green-button:hover{background:linear-gradient(0deg,var(--c80),var(--c90))}.green-button:active{background:linear-gradient(0deg,var(--c70),var(--c80))}.blue-button:hover{background:linear-gradient(0deg,var(--c80),var(--c90))}.blue-button:active{background:linear-gradient(0deg,var(--c70),var(--c80))}.orange-button:hover{background:linear-gradient(0deg,var(--c80),var(--c90))}.orange-button:active{background:linear-gradient(0deg,var(--c70),var(--c80))}