diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index cdfc0ee..fa0be7b 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -15,31 +15,15 @@ const ActionButton: React.FC<{
     target.disabled = false;
   };
 
-  const setStyles = function (
-    element: HTMLElement,
-    styles: React.CSSProperties,
-  ) {
-    Object.assign(element.style, styles);
-  };
-
   const buttonActive = function (element: HTMLButtonElement) {
-    const {
-      innerText,
-      style: { color, backgroundColor },
-    } = element;
+    const { innerText } = element;
 
     setTimeout(() => {
-      setStyles(element, {
-        color: color,
-        backgroundColor: backgroundColor,
-      });
+      element.classList.remove("active");
       element.innerText = innerText;
     }, activeDuration);
 
-    setStyles(element, {
-      color: "#282c34",
-      backgroundColor: "white",
-    });
+    element.classList.add("active");
     if (changeText) {
       element.innerText = changeText;
     }
diff --git a/src/components/CardActions.css b/src/components/CardActions.css
index a0da220..35f2b6e 100644
--- a/src/components/CardActions.css
+++ b/src/components/CardActions.css
@@ -17,3 +17,8 @@
   border-radius: 0.25rem;
   background-color: transparent;
 }
+
+.CardActions button.active {
+  color: var(--dark);
+  background-color: var(--off-white);
+}