Update

Co-Authored-By: JehanKandy  <jehankandy@gmail.com>

Author: BackendExpert

jkcss/v101-alpha1/buttons/button.css

@@ -1,3 +1,34 @@
+@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Roboto&display=swap");
+:root {
+  --jk-blue: #1672fd;
+  --jk-blue-hover: #025ce4;
+  --text-color: white;
+  --jk-gray: grey;
+  --jk-gray-hover: rgb(114, 114, 114);
+  --jk-green: #1b8b57;
+  --jk-green-hover: #147045;
+  --jk-red: #ca2d3dee;
+  --jk-red-hover: #b32432ee;
+  --jk-yellow: #ff9900;
+  --jk-yellow-hover: #ff9900e3;
+  --jk-lightblue: #54b4d3;
+  --jk-lightblue-hover: #54b3d3ea;
+  --jk-purple: #A020F0;
+  --title-font-family: "Kanit", sans-serif;
+  --jk-site-font: "Roboto", sans-serif;
+}
+
+.jk-btn, .jk-blue {
+  padding: 15px 25px;
+  transition: 0.4s;
+  border-radius: 5px;
+}
+
+.jk-btn:hover, .jk-blue:hover {
+  cursor: pointer;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
 .no-border, .jk-info:hover, .jk-info, .jk-yellow:hover, .jk-yellow, .jk-red:hover, .jk-red, .jk-green:hover, .jk-green, .jk-gray:hover, .jk-gray, .jk-blue:hover, .jk-blue {
   border: none;
   color: var(--text-color);

jkcss/v101-alpha1/buttons/button.min.css

@@ -3,10 +3,12 @@
 .no-border{
     border: none;
     color: var(--text-color);
+
 }
 .jk-blue{
     background-color: var(--jk-blue);
     @extend .no-border;
+    @extend .jk-btn;
 }
 .jk-blue:hover{
     background-color: var(--jk-blue-hover);

jkcss/v101-alpha1/buttons/button.scss

@@ -1,4 +1,35 @@
 @import url("https://fonts.googleapis.com/css2?family=Kanit&family=Roboto&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Roboto&display=swap");
+:root {
+  --jk-blue: #1672fd;
+  --jk-blue-hover: #025ce4;
+  --text-color: white;
+  --jk-gray: grey;
+  --jk-gray-hover: rgb(114, 114, 114);
+  --jk-green: #1b8b57;
+  --jk-green-hover: #147045;
+  --jk-red: #ca2d3dee;
+  --jk-red-hover: #b32432ee;
+  --jk-yellow: #ff9900;
+  --jk-yellow-hover: #ff9900e3;
+  --jk-lightblue: #54b4d3;
+  --jk-lightblue-hover: #54b3d3ea;
+  --jk-purple: #A020F0;
+  --title-font-family: "Kanit", sans-serif;
+  --jk-site-font: "Roboto", sans-serif;
+}
+
+.jk-btn, .no-border, .jk-info:hover, .jk-info, .jk-yellow:hover, .jk-yellow, .jk-red:hover, .jk-red, .jk-green:hover, .jk-green, .jk-gray:hover, .jk-gray, .jk-blue:hover, .jk-blue {
+  padding: 15px 25px;
+  transition: 0.4s;
+  border-radius: 5px;
+}
+
+.jk-btn:hover, .no-border:hover, .jk-info:hover, .jk-yellow:hover, .jk-red:hover, .jk-green:hover, .jk-gray:hover, .jk-blue:hover {
+  cursor: pointer;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
 :root {
   --jk-blue: #1672fd;
   --jk-blue-hover: #025ce4;
@@ -18,13 +49,13 @@
   --jk-site-font: "Roboto", sans-serif;
 }
 
-.jk-btn {
+.jk-btn, .no-border, .jk-info:hover, .jk-info, .jk-yellow:hover, .jk-yellow, .jk-red:hover, .jk-red, .jk-green:hover, .jk-green, .jk-gray:hover, .jk-gray, .jk-blue:hover, .jk-blue {
   padding: 15px 25px;
   transition: 0.4s;
   border-radius: 5px;
 }
 
-.jk-btn:hover {
+.jk-btn:hover, .no-border:hover, .jk-info:hover, .jk-yellow:hover, .jk-red:hover, .jk-green:hover, .jk-gray:hover, .jk-blue:hover {
   cursor: pointer;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }