diff options
| author | Mark Otto <[email protected]> | 2015-08-09 22:48:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-08-09 22:48:48 -0700 |
| commit | 68e4d897ba9ecb1c82c7da9d532126c4847a9753 (patch) | |
| tree | de217624ba96fbcdb467c41bfa583c50fc0c63dd | |
| parent | 91d236664d468cb37f0e52d677cb93f6b243a1b7 (diff) | |
| download | bootstrap-68e4d897ba9ecb1c82c7da9d532126c4847a9753.tar.xz bootstrap-68e4d897ba9ecb1c82c7da9d532126c4847a9753.zip | |
shoutout to outline buttons
| -rw-r--r-- | docs/components/buttons.md | 13 | ||||
| -rw-r--r-- | scss/_buttons.scss | 6 |
2 files changed, 19 insertions, 0 deletions
diff --git a/docs/components/buttons.md b/docs/components/buttons.md index e0f6796b9..95e3a14c2 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 12805dd2e..6a0867862 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 |