2 files changed, 16 insertions, 11 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index dacea3e1..55563e00 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -14,15 +14,18 @@
 }
 
 .cru-button:not(.outline):hover {
-  filter: brightness(var(--cru-hover-darkness));
+  background-color: var(--cru-key-1-color);
+  border-color: var(--cru-key-1-color);
 }
 
 .cru-button:not(.outline):focus {
-  filter: brightness(var(--cru-focus-darkness));
+  background-color: var(--cru-key-1-color);
+  border-color: var(--cru-key-1-color);
 }
 
 .cru-button:not(.outline):active {
-  filter: brightness(var(--cru-press-darkness));
+  background-color: var(--cru-key-2-color);
+  border-color: var(--cru-key-2-color);
 }
 
 .cru-button:not(.outline):disabled {
@@ -33,20 +36,22 @@
 
 .cru-button.outline {
   color: var(--cru-key-color);
-  border: var(--cru-key-color) 1px solid;
-  background-color: var(--cru-surface-color);
+  border-color: var(--cru-key-color);
 }
 
 .cru-button.outline:hover {
-  filter: brightness(var(--cru-hover-brightness));
+  color: var(--cru-key-1-color);
+  border-color: var(--cru-key-1-color);
 }
 
 .cru-button.outline:focus {
-  filter: brightness(var(--cru-focus-brightness));
+  color: var(--cru-key-1-color);
+  border-color: var(--cru-key-1-color);
 }
 
 .cru-button.outline:active {
-  filter: brightness(var(--cru-press-brightness));
+  color: var(--cru-key-2-color);
+  border-color: var(--cru-key-2-color);
 }
 
 .cru-button.outline:disabled {
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index f9a7d772..921fafe4 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -10,15 +10,15 @@
 }
 
 .cru-flat-button:hover {
-  filter: brightness(var(--cru-hover-darkness));
+  background-color: var(--cru-surface-1-color);
 }
 
 .cru-flat-button:focus {
-  filter: brightness(var(--cru-focus-darkness));
+  background-color: var(--cru-surface-1-color);
 }
 
 .cru-flat-button:active {
-  filter: brightness(var(--cru-press-darkness));
+  background-color: var(--cru-surface-2-color);
 }
 
 .cru-flat-button.disabled {