## Outline buttons

Replace the provided button variant classes like `.btn-primary` with `.btn-primary-outline` to switch from the solid gradient backgrounds buttons to outline ones.

{% example html %}
<button type="button" class="btn btn-lg btn-default-outline">Default</button>
<button type="button" class="btn btn-lg btn-primary-outline">Primary</button>
<button type="button" class="btn btn-lg btn-success-outline">Success</button>
<button type="button" class="btn btn-lg btn-info-outline">Info</button>
<button type="button" class="btn btn-lg btn-warning-outline">Warning</button>
<button type="button" class="btn btn-lg btn-danger-outline">Danger</button>
{% endexample %}

{% example html %}
<button type="button" class="btn btn-default-outline">Default</button>
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-info-outline">Info</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
{% endexample %}

{% example html %}
<button type="button" class="btn btn-sm btn-default-outline">Default</button>
<button type="button" class="btn btn-sm btn-primary-outline">Primary</button>
<button type="button" class="btn btn-sm btn-success-outline">Success</button>
<button type="button" class="btn btn-sm btn-info-outline">Info</button>
<button type="button" class="btn btn-sm btn-warning-outline">Warning</button>
<button type="button" class="btn btn-sm btn-danger-outline">Danger</button>
{% endexample %}

{% example html %}
<button type="button" class="btn btn-xs btn-default-outline">Default</button>
<button type="button" class="btn btn-xs btn-primary-outline">Primary</button>
<button type="button" class="btn btn-xs btn-success-outline">Success</button>
<button type="button" class="btn btn-xs btn-info-outline">Info</button>
<button type="button" class="btn btn-xs btn-warning-outline">Warning</button>
<button type="button" class="btn btn-xs btn-danger-outline">Danger</button>
{% endexample %}