From 68e4d897ba9ecb1c82c7da9d532126c4847a9753 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 9 Aug 2015 22:48:48 -0700
Subject: [PATCH] shoutout to outline buttons

---
 docs/components/buttons.md | 13 +++++++++++++
 scss/_buttons.scss         |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index e0f6796b92..95e3a14c22 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -54,6 +54,19 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 <input class="btn btn-primary" type="submit" value="Submit">
 {% endexample %}
 
+## Outline buttons
+
+In need of a button, but not the hefty background colors they bring? Add the `.btn-outline` modifier class to remove all background images and colors on any button.
+
+{% example html %}
+<button type="button" class="btn btn-primary btn-outline">Primary</button>
+<button type="button" class="btn btn-secondary btn-outline">Secondary</button>
+<button type="button" class="btn btn-success btn-outline">Success</button>
+<button type="button" class="btn btn-warning btn-outline">Warning</button>
+<button type="button" class="btn btn-danger btn-outline">Danger</button>
+{% endexample %}
+
+
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 12805dd2e3..6a08678622 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -82,6 +82,12 @@ fieldset[disabled] a.btn {
   @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
 }
 
+// Remove all backgrounds
+.btn-outline {
+  background-color: $body-bg;
+  background-image: transparent;
+}
+
 
 //
 // Link buttons