Add buttons sizing classes

Author: mohouyizme

source/app/index.html

@@ -71,6 +71,27 @@ <h3 class="title">Disabled buttons</h3>
       <button href="#" class="btn btn-rounded" disabled>btn-rounded</button>
       <button href="#" class="btn btn-rounded btn-outlined" disabled>btn-outlined</button>
     </div>
+
+    <h3 class="title">Buttons Sizes</h3>
+    <div class="divider"></div>
+
+    <div class="type-buttons">
+      <button href="#" class="btn btn-primary gradient-green btn-small">btn-small</button>
+      <button href="#" class="btn btn-primary gradient-purple">default size</button>
+      <button href="#" class="btn btn-primary gradient-orange btn-large">btn-large</button>
+    </div>
+
+    <div class="type-buttons">
+      <button href="#" class="btn btn-rounded gradient-green btn-small">btn-small</button>
+      <button href="#" class="btn btn-rounded gradient-purple">default size</button>
+      <button href="#" class="btn btn-rounded gradient-orange btn-large">btn-large</button>
+    </div>
+
+    <div class="type-buttons">
+      <button href="#" class="btn btn-rounded btn-outlined green-btn btn-small">btn-small</button>
+      <button href="#" class="btn btn-rounded btn-outlined purple-btn">default size</button>
+      <button href="#" class="btn btn-rounded btn-outlined orange-btn btn-large">btn-large</button>
+    </div>
   </div>
   <div class="container">
     <h3 class="title">Forms</h3>

source/app/styles/buttons.scss

@@ -1,22 +1,22 @@
 @import "colors";
 
-.btn  {
+.btn {
   padding: 1rem 1.5rem;
   color: #fff;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
 }
 
-.btn-primary  {
+.btn-primary {
   border-radius: 5px;
 }
 
-.btn-rounded  {
-  border-radius: 30px;
+.btn-rounded {
+  border-radius: 60px;
 }
 
-.btn-outlined  {
+.btn-outlined {
   border-width: 3px;
   border-style: solid;
   transition: all 0.5s;
@@ -31,7 +31,7 @@
   background: $black !important;
 }
 
-.black-btn  {
+.black-btn {
   border-color: $black;
   color: $black;
 
@@ -40,7 +40,7 @@
   }
 }
 
-.green-btn  {
+.green-btn {
   border-color: $green;
   color: $green;
 
@@ -49,7 +49,7 @@
   }
 }
 
-.orange-btn  {
+.orange-btn {
   border-color: $orange-btn;
   color: $orange-btn;
 
@@ -58,7 +58,7 @@
   }
 }
 
-.purple-btn  {
+.purple-btn {
   border-color: $purple-btn;
   color: $purple-btn;
 
@@ -67,15 +67,23 @@
   }
 }
 
-button:disabled  {
+.btn-small {
+  padding: 0.5rem 1rem;
+}
+
+.btn-large {
+  padding: 1.5rem 2rem;
+}
+
+button:disabled {
   box-shadow: unset;
-  opacity: .8;
+  opacity: 0.8;
   background: $disabled;
   color: #fff;
   border: unset;
 
-  &:hover  {
+  &:hover {
     box-shadow: unset;
     background: $disabled;
   }
-}
+}