1 files changed, 48 insertions, 0 deletions
diff --git a/front-end/src/buttons.scss b/front-end/src/buttons.scss
new file mode 100644
index 0000000..409f405
--- /dev/null
+++ b/front-end/src/buttons.scss
@@ -0,0 +1,48 @@
+.btn{
+    @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center me-2  text-white;
+
+    &.round{
+        @apply rounded-full;
+    }
+   
+    &.blue{
+        @apply bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
+    }
+
+    &.red{
+        @apply bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800;
+    }
+
+    &.green{
+        @apply bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
+    }
+
+    &.yellow{
+        @apply bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800;
+    }
+
+    &.purple{
+        @apply bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800;
+    }
+
+    &.pink{
+        @apply bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800;
+    }
+
+    &.indigo{
+        @apply bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800;
+    }
+
+    &.gray{
+        @apply bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800;
+    }
+
+    &.orange{
+        @apply bg-orange-700 hover:bg-orange-800 focus:ring-orange-300 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-800;
+    }
+
+    &.light{
+        @apply text-gray-500 border bg-white hover:bg-gray-100 focus:ring-blue-300 border-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600;
+    }
+    
+}