0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00

shoutout to outline buttons

This commit is contained in:
Mark Otto 2015-08-09 22:48:48 -07:00
parent 91d236664d
commit 68e4d897ba
2 changed files with 19 additions and 0 deletions

View File

@ -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.

View File

@ -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