diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
index c081ead801..5a194a3c58 100644
--- a/web/src/components/Button.jsx
+++ b/web/src/components/Button.jsx
@@ -2,12 +2,18 @@ import { h } from 'preact';
 
 const noop = () => {};
 
+const BUTTON_COLORS = {
+  blue: { normal: 'bg-blue-500', hover: 'hover:bg-blue-400' },
+  red: { normal: 'bg-red-500', hover: 'hover:bg-red-400' },
+  green: { normal: 'bg-green-500', hover: 'hover:bg-green-400' },
+};
+
 export default function Button({ children, className, color = 'blue', onClick, size, ...attrs }) {
   return (
     <div
       role="button"
       tabindex="0"
-      className={`rounded bg-${color}-500 text-white pl-4 pr-4 pt-2 pb-2 font-bold shadow hover:bg-${color}-400 hover:shadow-lg cursor-pointer ${className}`}
+      className={`rounded ${BUTTON_COLORS[color].normal} text-white pl-4 pr-4 pt-2 pb-2 font-bold shadow ${BUTTON_COLORS[color].hover} hover:shadow-lg cursor-pointer ${className}`}
       onClick={onClick || noop}
       {...attrs}
     >