diff --git a/build/scss/_buttons.scss b/build/scss/_buttons.scss
index 4bb2b7e51..940dd63dd 100644
--- a/build/scss/_buttons.scss
+++ b/build/scss/_buttons.scss
@@ -55,6 +55,17 @@
   }
 }
 
+.btn-outline-light {
+  color: darken($light, 20%);
+  border-color: darken($light, 20%);
+
+  &.disabled,
+  &:disabled {
+    color: darken($light, 20%);
+    border-color: darken($light, 20%);
+  }
+}
+
 // Application buttons
 .btn-app {
   @include border-radius(3px);
@@ -142,13 +153,21 @@
 
   @each $color, $value in $theme-colors-alt {
     .btn-#{$color} {
-      @include button-variant($value, $value);
+      @if $color == dark {
+        @include button-variant(darken($value, 5%), lighten($value, 10%));
+      } @else {
+        @include button-variant($value, $value);
+      }
     }
   }
 
   @each $color, $value in $theme-colors-alt {
     .btn-outline-#{$color} {
-      @include button-outline-variant($value);
+      @if $color == dark {
+        @include button-outline-variant(darken($value, 20%));
+      } @else {
+        @include button-outline-variant($value);
+      }
     }
   }
 }
diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html
index 3dfaab207..e82c3f9b5 100644
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -1009,6 +1009,46 @@
                       <button type="button" class="btn btn-block btn-warning disabled">Warning</button>
                     </td>
                   </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-lg">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-sm">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-xs">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light btn-flat">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-light disabled">Light</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-lg">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-sm">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-xs">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark btn-flat">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-dark disabled">Dark</button>
+                    </td>
+                  </tr>
                 </table>
               </div>
               <!-- /.card -->
@@ -1158,6 +1198,46 @@
                       <button type="button" class="btn btn-block btn-outline-warning disabled">Warning</button>
                     </td>
                   </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-lg">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-sm">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-xs">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light btn-flat">Light</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-light disabled">Light</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-lg">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-sm">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-xs">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark btn-flat">Dark</button>
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-block btn-outline-dark disabled">Dark</button>
+                    </td>
+                  </tr>
                 </table>
               </div>
               <!-- /.card -->