bootstrap outline buttons

1In need of a button, but not the hefty background colors they bring? 
2Replace the default modifier classes with the .btn-outline-* ones to 
3remove all background images and colors on any button.
4
5<button type="button" class="btn btn-outline-primary">Primary</button>
6<button type="button" class="btn btn-outline-secondary">Secondary</button>
7<button type="button" class="btn btn-outline-success">Success</button>
8<button type="button" class="btn btn-outline-danger">Danger</button>
9<button type="button" class="btn btn-outline-warning">Warning</button>
10<button type="button" class="btn btn-outline-info">Info</button>
11<button type="button" class="btn btn-outline-light">Light</button>
12<button type="button" class="btn btn-outline-dark">Dark</button>

1Bootstrap includes several predefined button styles, each serving its own
2semantic purpose, with a few extras thrown in for more control.
3Using color to add meaning only provides a visual indication, which will
4not be conveyed to users of assistive technologies – such as screen readers. 
5Ensure that information denoted by the color is either obvious from the 
6content itself (e.g. the visible text), or is included through alternative
7means, such as additional text hidden with the .sr-only class.
8
9<button type="button" class="btn btn-primary">Primary</button>
10<button type="button" class="btn btn-secondary">Secondary</button>
11<button type="button" class="btn btn-success">Success</button>
12<button type="button" class="btn btn-danger">Danger</button>
13<button type="button" class="btn btn-warning">Warning</button>
14<button type="button" class="btn btn-info">Info</button>
15<button type="button" class="btn btn-light">Light</button>
16<button type="button" class="btn btn-dark">Dark</button>
17
18<button type="button" class="btn btn-link">Link</button>

1<button type="button" class="btn btn-primary">Primary</button>
2<button type="button" class="btn btn-secondary">Secondary</button>
3<button type="button" class="btn btn-success">Success</button>
4<button type="button" class="btn btn-danger">Danger</button>
5<button type="button" class="btn btn-warning">Warning</button>
6<button type="button" class="btn btn-info">Info</button>
7<button type="button" class="btn btn-light">Light</button>
8<button type="button" class="btn btn-dark">Dark</button>
9<button type="button" class="btn btn-link">Link</button>
10<a class="btn btn-primary" href="#" role="button">Link</a>
11<button class="btn btn-primary" type="submit">Button</button>
12<input class="btn btn-primary" type="button" value="Input">
13<input class="btn btn-primary" type="submit" value="Submit">
14<input class="btn btn-primary" type="reset" value="Reset">
15<button type="button" class="btn btn-outline-primary">Primary</button>
16<button type="button" class="btn btn-outline-secondary">Secondary</button>
17<button type="button" class="btn btn-outline-success">Success</button>
18<button type="button" class="btn btn-outline-danger">Danger</button>
19<button type="button" class="btn btn-outline-warning">Warning</button>
20<button type="button" class="btn btn-outline-info">Info</button>
21<button type="button" class="btn btn-outline-light">Light</button>
22<button type="button" class="btn btn-outline-dark">Dark</button>
23<button type="button" class="btn btn-primary btn-lg">Large button</button>
24<button type="button" class="btn btn-secondary btn-lg">Large button</button>
25<button type="button" class="btn btn-primary btn-sm">Small button</button>
26<button type="button" class="btn btn-secondary btn-sm">Small button</button>
27<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
28<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
29<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
30<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
31<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
32<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
33<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
34  Single toggle
35</button>
36<div class="btn-group-toggle" data-toggle="buttons">
37  <label class="btn btn-secondary active">
38    <input type="checkbox" checked autocomplete="off"> Checked
39  </label>
40</div>
41<div class="btn-group btn-group-toggle" data-toggle="buttons">
42  <label class="btn btn-secondary active">
43    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
44  </label>
45  <label class="btn btn-secondary">
46    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
47  </label>
48  <label class="btn btn-secondary">
49    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
50  </label>
51</div>

1<button type="button" class="btn btn-outline-primary" href="#">Primary</button>

1The .btn classes are designed to be used with the <button> element. 
2However, you can also use these classes on <a> or <input> elements
3(though some browsers may apply a slightly different rendering).
4
5When using button classes on <a> elements that are used to trigger in-page 
6functionality (like collapsing content), rather than linking to new pages or 
7sections within the current page, these links should be given a role="button" 
8to appropriately convey their purpose to assistive technologies such as screen 
9readers.
10
11<a class="btn btn-primary" href="#" role="button">Link</a>
12<button class="btn btn-primary" type="submit">Button</button>
13<input class="btn btn-primary" type="button" value="Input">
14<input class="btn btn-primary" type="submit" value="Submit">
15<input class="btn btn-primary" type="reset" value="Reset">