uniformButton

Mix and match styles to make the right button, all colors are available as well.

State

.uniformButton 
{ --bg-opacity: 1;
 --text-opacity: 1;
 --border-opacity: 0.6;
 --active-opacity: 0.2;
 --border-radius: 0.35em;
 --pad-v: 0.5em;
 --pad-h: 0.85em;
 position: relative;
 z-index: 1;
 outline: none;
 appearance: none;
 display: inline-block;
 text-decoration: none;
 user-select: none;
 padding: var(--pad-v) var(--pad-h);
 vertical-align: middle;
 text-align: center;
 line-height: 1;
 border-radius: var(--border-radius);
 border-style: solid;
 border-width: 1px;
 color: rgba(50, 50, 51, var(--text-opacity));
 background-color: rgba(255, 255, 255, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.1));
 background-blend-mode: multiply;
 border-color: rgba(125, 127, 129, var(--border-opacity));
 transition: color 100ms, box-shadow 100ms, background 100ms, padding 100ms;
 box-shadow: var(--box-shadow) }
.uniformButton.-hover 
{ --bg-opacity: 1;
 --border-opacity: 1;
 background-image: linear-gradient(rgba(255, 255, 255, 0.2) 33%, rgba(255, 255, 255, 0)) }
.uniformButton.-active 
{ box-shadow: inset 1px 1px 3px rgba(0, 0, 0, var(--active-opacity));
 padding-top: calc(var(--pad-v) + 1px);
 padding-bottom: calc(var(--pad-v) - 1px) }
.uniformButton.-focus 
{ box-shadow: 0 0 0 2px rgba(9, 148, 226, 0.7);
 z-index: 2 }
.uniformButton.-disabled 
{ --text-opacity: 0.5;
 cursor: not-allowed;
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5));
 background-blend-mode: saturation, luminosity }

Style

.uniformButton.-clear 
{ background: none;
 border-color: transparent }
.uniformButton.-outline 
{ --bg-opacity: 0;
 --border-opacity: 1;
 border-width: 0.1429em;
 background-image: none }
.uniformButton.-block 
{ display: block;
 width: 100% }

Size

.uniformButton.-xs 
{ --pad-v: 0.1em;
 --pad-h: 0.3em }
.uniformButton.-sm 
{ --pad-v: 0.25em;
 --pad-h: 0.5em }
.uniformButton.-lg 
{ --pad-v: 1em;
 --pad-h: 2em }
.uniformButton.-xl 
{ --pad-v: 1.5em;
 --pad-h: 3em;
 --border-radius: 0.5em }

Color

.uniformButton.-gray 
{ background-color: rgba(80, 81, 82, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(4, 4, 4, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-gray-10 
{ background-color: rgba(229, 229, 229, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(151, 153, 154, var(--border-opacity));
 color: rgba(75, 76, 77, var(--text-opacity)) }
.uniformButton.-gray-20 
{ background-color: rgba(203, 204, 204, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(125, 127, 129, var(--border-opacity));
 color: rgba(75, 76, 77, var(--text-opacity)) }
.uniformButton.-gray-30 
{ background-color: rgba(177, 178, 179, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(100, 101, 103, var(--border-opacity));
 color: rgba(75, 76, 77, var(--text-opacity)) }
.uniformButton.-gray-40 
{ background-color: rgba(151, 153, 154, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(75, 76, 77, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-gray-50 
{ background-color: rgba(125, 127, 129, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(50, 50, 51, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-gray-60 
{ background-color: rgba(100, 101, 103, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(25, 25, 25, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-gray-70 
{ background-color: rgba(75, 76, 77, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-gray-80 
{ background-color: rgba(50, 50, 51, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-gray-90 
{ background-color: rgba(25, 25, 25, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-green 
{ background-color: rgba(151, 200, 72, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(67, 91, 27, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-green-10 
{ background-color: rgba(235, 254, 204, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(176, 255, 50, var(--border-opacity));
 color: rgba(94, 153, 0, var(--text-opacity)) }
.uniformButton.-green-20 
{ background-color: rgba(214, 249, 158, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(153, 240, 14, var(--border-opacity));
 color: rgba(92, 144, 8, var(--text-opacity)) }
.uniformButton.-green-30 
{ background-color: rgba(192, 237, 119, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(120, 180, 23, var(--border-opacity));
 color: rgba(90, 135, 17, var(--text-opacity)) }
.uniformButton.-green-40 
{ background-color: rgba(168, 219, 86, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(88, 126, 26, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-green-50 
{ background-color: rgba(143, 196, 58, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(57, 78, 23, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-green-60 
{ background-color: rgba(117, 168, 35, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(29, 42, 8, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-green-70 
{ background-color: rgba(90, 135, 17, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-green-80 
{ background-color: rgba(61, 96, 5, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-green-90 
{ background-color: rgba(31, 51, 0, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-red 
{ background-color: rgba(225, 86, 62, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(115, 32, 18, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-red-10 
{ background-color: rgba(254, 211, 204, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(255, 81, 50, var(--border-opacity));
 color: rgba(153, 22, 0, var(--text-opacity)) }
.uniformButton.-red-20 
{ background-color: rgba(251, 170, 156, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(246, 43, 8, var(--border-opacity));
 color: rgba(147, 26, 5, var(--text-opacity)) }
.uniformButton.-red-30 
{ background-color: rgba(244, 131, 112, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(190, 39, 13, var(--border-opacity));
 color: rgba(142, 29, 10, var(--text-opacity)) }
.uniformButton.-red-40 
{ background-color: rgba(234, 95, 71, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(137, 33, 15, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-red-50 
{ background-color: rgba(220, 61, 34, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(88, 24, 13, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-red-60 
{ background-color: rgba(183, 44, 20, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(45, 11, 5, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-red-70 
{ background-color: rgba(142, 29, 10, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-red-80 
{ background-color: rgba(98, 17, 3, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-red-90 
{ background-color: rgba(51, 7, 0, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-blue 
{ background-color: rgba(9, 148, 226, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(3, 51, 78, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-blue-10 
{ background-color: rgba(204, 236, 254, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(50, 181, 255, var(--border-opacity));
 color: rgba(0, 98, 153, var(--text-opacity)) }
.uniformButton.-blue-20 
{ background-color: rgba(153, 218, 254, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(2, 162, 252, var(--border-opacity));
 color: rgba(1, 97, 151, var(--text-opacity)) }
.uniformButton.-blue-30 
{ background-color: rgba(104, 199, 252, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(3, 129, 200, var(--border-opacity));
 color: rgba(2, 97, 150, var(--text-opacity)) }
.uniformButton.-blue-40 
{ background-color: rgba(56, 180, 249, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(4, 96, 148, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-blue-50 
{ background-color: rgba(9, 160, 245, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(3, 64, 98, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-blue-60 
{ background-color: rgba(5, 129, 198, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(1, 32, 49, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-blue-70 
{ background-color: rgba(2, 97, 150, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-blue-80 
{ background-color: rgba(0, 65, 101, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-blue-90 
{ background-color: rgba(0, 32, 51, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-yellow 
{ background-color: rgba(215, 229, 66, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(115, 124, 17, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-yellow-10 
{ background-color: rgba(250, 254, 204, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(237, 255, 50, var(--border-opacity));
 color: rgba(139, 153, 0, var(--text-opacity)) }
.uniformButton.-yellow-20 
{ background-color: rgba(243, 251, 156, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(226, 247, 7, var(--border-opacity));
 color: rgba(136, 148, 4, var(--text-opacity)) }
.uniformButton.-yellow-30 
{ background-color: rgba(234, 245, 111, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(176, 191, 12, var(--border-opacity));
 color: rgba(132, 143, 9, var(--text-opacity)) }
.uniformButton.-yellow-40 
{ background-color: rgba(222, 236, 69, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(128, 139, 13, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-yellow-50 
{ background-color: rgba(207, 224, 30, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(83, 89, 12, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-yellow-60 
{ background-color: rgba(171, 185, 18, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(42, 46, 4, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-yellow-70 
{ background-color: rgba(132, 143, 9, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-yellow-80 
{ background-color: rgba(90, 98, 3, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-yellow-90 
{ background-color: rgba(46, 51, 0, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-purple 
{ background-color: rgba(148, 97, 185, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(68, 39, 89, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-purple-10 
{ background-color: rgba(233, 204, 254, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(169, 50, 255, var(--border-opacity));
 color: rgba(88, 0, 153, var(--text-opacity)) }
.uniformButton.-purple-20 
{ background-color: rgba(210, 160, 247, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(144, 19, 235, var(--border-opacity));
 color: rgba(86, 11, 141, var(--text-opacity)) }
.uniformButton.-purple-30 
{ background-color: rgba(186, 125, 231, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(113, 31, 172, var(--border-opacity));
 color: rgba(84, 23, 129, var(--text-opacity)) }
.uniformButton.-purple-40 
{ background-color: rgba(161, 97, 208, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(83, 35, 117, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-purple-50 
{ background-color: rgba(135, 78, 176, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(54, 31, 70, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-purple-60 
{ background-color: rgba(110, 46, 157, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(27, 11, 39, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity)) }
.uniformButton.-purple-70 
{ background-color: rgba(84, 23, 129, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-purple-80 
{ background-color: rgba(57, 7, 94, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }
.uniformButton.-purple-90 
{ background-color: rgba(29, 0, 51, var(--bg-opacity));
 background-image: linear-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3));
 background-blend-mode: overlay;
 border-color: rgba(0, 0, 0, var(--border-opacity));
 color: rgba(255, 255, 255, var(--text-opacity));
 --active-opacity: 0.5 }

Button Group

.uniformButtonGroup.
.uniformButtonGroup.-gray
.uniformButtonGroup.-gray-10
.uniformButtonGroup.-gray-20
.uniformButtonGroup.-gray-30
.uniformButtonGroup.-gray-40
.uniformButtonGroup.-gray-50
.uniformButtonGroup.-gray-60
.uniformButtonGroup.-gray-70
.uniformButtonGroup.-gray-80
.uniformButtonGroup.-gray-90
.uniformButtonGroup.-green
.uniformButtonGroup.-green-10
.uniformButtonGroup.-green-20
.uniformButtonGroup.-green-30
.uniformButtonGroup.-green-40
.uniformButtonGroup.-green-50
.uniformButtonGroup.-green-60
.uniformButtonGroup.-green-70
.uniformButtonGroup.-green-80
.uniformButtonGroup.-green-90
.uniformButtonGroup.-red
.uniformButtonGroup.-red-10
.uniformButtonGroup.-red-20
.uniformButtonGroup.-red-30
.uniformButtonGroup.-red-40
.uniformButtonGroup.-red-50
.uniformButtonGroup.-red-60
.uniformButtonGroup.-red-70
.uniformButtonGroup.-red-80
.uniformButtonGroup.-red-90
.uniformButtonGroup.-blue
.uniformButtonGroup.-blue-10
.uniformButtonGroup.-blue-20
.uniformButtonGroup.-blue-30
.uniformButtonGroup.-blue-40
.uniformButtonGroup.-blue-50
.uniformButtonGroup.-blue-60
.uniformButtonGroup.-blue-70
.uniformButtonGroup.-blue-80
.uniformButtonGroup.-blue-90
.uniformButtonGroup.-yellow
.uniformButtonGroup.-yellow-10
.uniformButtonGroup.-yellow-20
.uniformButtonGroup.-yellow-30
.uniformButtonGroup.-yellow-40
.uniformButtonGroup.-yellow-50
.uniformButtonGroup.-yellow-60
.uniformButtonGroup.-yellow-70
.uniformButtonGroup.-yellow-80
.uniformButtonGroup.-yellow-90
.uniformButtonGroup.-purple
.uniformButtonGroup.-purple-10
.uniformButtonGroup.-purple-20
.uniformButtonGroup.-purple-30
.uniformButtonGroup.-purple-40
.uniformButtonGroup.-purple-50
.uniformButtonGroup.-purple-60
.uniformButtonGroup.-purple-70
.uniformButtonGroup.-purple-80
.uniformButtonGroup.-purple-90