diff --git a/src/assets/styles/custom/button.scss b/src/assets/styles/custom/button.scss
new file mode 100644
index 0000000..50f82ae
--- /dev/null
+++ b/src/assets/styles/custom/button.scss
@@ -0,0 +1,134 @@
+// Color variables
+$orange: #ff9800;
+$orange-hover: #ffb74d;
+
+$blue: #2196f3;
+$blue-hover: #42a5f5;
+
+$red: #f44336;
+$red-hover: #ef5350;
+
+$green: #4caf50;
+$green-hover: #66bb6a;
+
+$purple: #9c27b0;
+$purple-hover: #ab47bc;
+
+$teal: #009688;
+$teal-hover: #26a69a;
+
+$indigo: #3f51b5;
+$indigo-hover: #5c6bc0;
+
+$pink: #e91e63;
+$pink-hover: #ec407a;
+
+$cyan: #00bcd4;
+$cyan-hover: #26c6da;
+
+$amber: #ffc107;
+$amber-hover: #ffd54f;
+
+$brown: #795548;
+$brown-hover: #8d6e63;
+
+$grey: #9e9e9e;
+$grey-hover: #bdbdbd;
+
+.action-btn {
+  &.orange-btn {
+    background-color: $orange;
+
+    & &:hover {
+      background-color: $orange-hover;
+    }
+  }
+
+  &.blue-btn {
+    background-color: $blue;
+
+    &:hover {
+      background-color: $blue-hover;
+    }
+  }
+
+  &.red-btn {
+    background-color: $red;
+
+    &:hover {
+      background-color: $red-hover;
+    }
+  }
+
+  &.green-btn {
+    background-color: $green;
+
+    &:hover {
+      background-color: $green-hover;
+    }
+  }
+
+  &.purple-btn {
+    background-color: $purple;
+
+    &:hover {
+      background-color: $purple-hover;
+    }
+  }
+
+  &.teal-btn {
+    background-color: $teal;
+
+    &:hover {
+      background-color: $teal-hover;
+    }
+  }
+
+  &.indigo-btn {
+    background-color: $indigo;
+
+    &:hover {
+      background-color: $indigo-hover;
+    }
+  }
+
+  &.pink-btn {
+    background-color: $pink;
+
+    &:hover {
+      background-color: $pink-hover;
+    }
+  }
+
+  &.cyan-btn {
+    background-color: $cyan;
+
+    &:hover {
+      background-color: $cyan-hover;
+    }
+  }
+
+  &.amber-btn {
+    background-color: $amber;
+
+    &:hover {
+      background-color: $amber-hover;
+    }
+  }
+
+  &.brown-btn {
+    background-color: $brown;
+
+    &:hover {
+      background-color: $brown-hover;
+    }
+  }
+
+  &.grey-btn {
+    background-color: $grey;
+
+    &:hover {
+      background-color: $grey-hover;
+    }
+  }
+}
diff --git a/src/assets/styles/custom/index.scss b/src/assets/styles/custom/index.scss
new file mode 100644
index 0000000..2439969
--- /dev/null
+++ b/src/assets/styles/custom/index.scss
@@ -0,0 +1 @@
+@forward './button';
\ No newline at end of file
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 4832f10..ae750f1 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,3 +1,4 @@
 @forward './base';
 @forward './variables';
-@forward './ant-design';
\ No newline at end of file
+@forward './ant-design';
+@forward './custom/index';
\ No newline at end of file