diff --git a/src/shared/util/themeColors.ts b/src/shared/util/themeColors.ts
index 3e939c57..f52cba4c 100644
--- a/src/shared/util/themeColors.ts
+++ b/src/shared/util/themeColors.ts
@@ -1,15 +1,15 @@
 export const colors = {
     ut: {
-        'burnt-orange': '#BF5700',
+        burntorange: '#BF5700',
         black: '#333F48',
         orange: '#f8971f',
         yellow: '#ffd600',
-        'light-green': '#a6cd57',
+        lightgreen: '#a6cd57',
         green: '#579d42',
         teal: '#00a9b7',
         blue: '#005f86',
         gray: '#9cadb7',
-        'off-white': '#d6d2c4',
+        offwhite: '#d6d2c4',
         concrete: '#95a5a6',
     },
     theme: {
diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx
index f6de21a2..e62093ac 100644
--- a/src/stories/components/Button.stories.tsx
+++ b/src/stories/components/Button.stories.tsx
@@ -1,14 +1,14 @@
-import { Button } from 'src/views/components/common/Button/Button';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { colorsFlattened } from 'src/shared/util/themeColors';
-import ImagePlaceholderIcon from '~icons/material-symbols/image';
+import { Button } from 'src/views/components/common/Button/Button';
 import AddIcon from '~icons/material-symbols/add';
-import RemoveIcon from '~icons/material-symbols/remove';
 import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
-import ReviewsIcon from '~icons/material-symbols/reviews';
-import HappyFaceIcon from '~icons/material-symbols/mood';
 import DescriptionIcon from '~icons/material-symbols/description';
+import ImagePlaceholderIcon from '~icons/material-symbols/image';
+import HappyFaceIcon from '~icons/material-symbols/mood';
+import RemoveIcon from '~icons/material-symbols/remove';
+import ReviewsIcon from '~icons/material-symbols/reviews';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -128,7 +128,7 @@ export const CourseCatalogActionButtons: Story = {
     },
     render: props => (
         <div style={{ display: 'flex', gap: '15px' }}>
-            <Button {...props} variant='filled' color='ut-burnt-orange' icon={CalendarMonthIcon} />
+            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
             <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
                 RateMyProf
             </Button>
diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx
index d2be0bd3..689281a2 100644
--- a/src/views/components/common/Button/Button.tsx
+++ b/src/views/components/common/Button/Button.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
-import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
 import type IconComponent from '~icons/material-symbols';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
 import Text from '../Text/Text';
 
 interface Props {
@@ -33,28 +33,24 @@ export function Button({
     const Icon = icon;
     const isIconOnly = !children && !!icon;
     const colorHex = getThemeColorHexByName(color);
-    const colorRgb = getThemeColorRgbByName(color).join(' ');
+    const colorRgb = getThemeColorRgbByName(color)?.join(' ');
 
     return (
         <button
             style={
                 {
                     ...style,
-                    '--color': colorHex,
-                    '--bg-color-8': `rgba(${colorRgb} / 0.08)`,
-                    '--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
-                    '--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
+                    color: colorHex,
+                    backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
                 } as React.CSSProperties
             }
             className={clsx(
                 'btn',
                 {
-                    'disabled:(cursor-not-allowed opacity-50)': disabled,
-                    'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow':
+                    'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
-                    'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid':
-                        variant === 'outline',
-                    'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single"
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single"
                     'px-2 py-1.25': isIconOnly && variant !== 'outline',
                     'px-1.75 py-1.25': isIconOnly && variant === 'outline',
                     'px-3.75': variant === 'outline' && !isIconOnly,
@@ -65,7 +61,7 @@ export function Button({
             disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {icon && <Icon className='size-6' />}
+            {icon && <Icon className='h-6 w-6' />}
             {!isIconOnly && (
                 <Text variant='h4' className='translate-y-0.08'>
                     {children}
diff --git a/unocss.config.ts b/unocss.config.ts
index 605cad07..4cf5f36f 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -7,18 +7,9 @@ import { colors } from './src/shared/util/themeColors';
 
 export default defineConfig({
     rules: [
-        ['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
         [
-            'btn-shadow',
-            {
-                'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);',
-            },
-        ],
-        [
-            'btn-shade',
-            {
-                'background-color': 'var(--bg-color-8)',
-            },
+            'btn-transition',
+            { transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 100ms, transform 50ms' },
         ],
         [
             'ring-offset-0',
@@ -29,7 +20,7 @@ export default defineConfig({
     ],
     shortcuts: {
         focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
-        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition',
+        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
     },
     theme: {
         easing: {