feat:add gradient background support to buttons

Devwares-Team · Mar 5, 2022 · 12b2655 · 12b2655
1 parent 4bfcc82
commit 12b2655
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 2 deletions.
diff --git a/css/cdb.css b/css/cdb.css
diff --git a/css/cdb.css.map b/css/cdb.css.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cdbootstrap",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "js/cdb.js",
   "repository": {
     "type": "git",

diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
@@ -231,4 +231,105 @@
     padding: 3px 6px;
     font-size: 0.625rem;
   }
+  &-gradient {
+    &-primary {
+      background-image: linear-gradient(
+        to right,
+        #60a5fa,
+        $primary-color,
+        #2563eb
+      );
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+    &-secondary {
+      background-image: linear-gradient(
+        to right,
+        #818cf8,
+        $secondary-color,
+        #4f46e5
+      );
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+    &-danger {
+      background-image: linear-gradient(
+        to right,
+        #f87171,
+        $danger-color,
+        #dc2626
+      );
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+    &-success {
+      background-image: linear-gradient(
+        to right,
+        #4ade80,
+        $success-color,
+        #16a34a
+      );
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+    &-warning {
+      background-image: linear-gradient(
+        to right,
+        #fde047,
+        $warning-color,
+        #facc15
+      );
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+    &-info {
+      background-image: linear-gradient(
+        to right,
+        #22d3ee,
+        $info-color,
+        #0891b2
+      );
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+    &-light {
+      background-image: linear-gradient(
+        to right,
+        $light-color,
+        #f4f4f4,
+        #f0f0f0
+      );
+      border: none;
+      color: #333;
+      &:hover {
+        color: #333;
+      }
+    }
+    &-dark {
+      background-image: linear-gradient(to right, #374151, #1f2937, #111827);
+      border: none;
+      color: #fff;
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
 }