gentux-style-guide/_atoms/02-buttons.html

<http://gentuxdesign.com>

---
title: Buttons
bootstrap-link: http://getbootstrap.com/css/#buttons
---


<button type="button" class="btn btn-default btn-xs mb-2">btn x-small</button>
<button type="button" class="btn btn-default btn-sm mb-2">btn small</button>
<button type="button" class="btn btn-default mb-2">btn default</button>
<button type="button" class="btn btn-default btn-lg mb-2">btn large</button>
<button disabled type="button" class="btn btn-default mb-2">btn disabled</button>
<button disabled type="button" class="btn mb-2">btn disabled</button>

<hr class="mt-4 mb-4">

<!-- Standard button -->
<button type="button" class="btn btn-default mb-2">btn default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary mb-2">btn primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info mb-2">btn info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success mb-2">btn success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger mb-2">btn danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link mb-2">btn link</button>
<br>
<!-- Standard button -->
<button type="button" class="btn btn-default mb-2 active">btn default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary mb-2 active">btn primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info mb-2 active">btn info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success mb-2 active">btn success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger mb-2 active">btn danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link mb-2 active">btn link</button>

<hr class="mt-4 mb-4">

<!-- Standard button -->
<button type="button" class="btn btn-hollow-default mb-2">btn hollow default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-primary mb-2">btn hollow primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-info mb-2">btn hollow info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-success mb-2">btn hollow success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-danger mb-2">btn hollow danger</button>
<br>
<button type="button" class="btn btn-hollow-default mb-2 active">btn hollow default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-primary mb-2 active">btn hollow primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-info mb-2 active">btn hollow info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-success mb-2 active">btn hollow success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-danger mb-2 active">btn hollow danger</button>

<hr class="mt-4 mb-4">

<!-- Standard button -->
<button type="button" class="btn btn-hollow-transparent-default mb-2">btn hollow transparent default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-transparent-primary mb-2">btn hollow transparent primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-transparent-info mb-2">btn hollow transparent info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-transparent-success mb-2">btn hollow transparent success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-transparent-danger mb-2">btn hollow transparent danger</button>
<br>
<!-- Standard button -->
<button type="button" class="btn btn-hollow-transparent-default mb-2 active">btn hollow transparent default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-hollow-transparent-primary mb-2 active">btn hollow transparent primary</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-hollow-transparent-info mb-2 active">btn hollow transparent info</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-hollow-transparent-success mb-2 active">btn hollow transparent success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-hollow-transparent-danger mb-2 active">btn hollow transparent danger</button>

<hr class="mt-4 mb-4">

<div class="row">
	<div class="col-xs-6">
		<button type="button" class="btn btn-default mb-2 btn-block">btn block</button>
	</div>
	<div class="col-xs-6">
		<button type="button" class="btn btn-primary mb-2 btn-block">btn block</button>
	</div>
</div>
<div class="row">
	<div class="col-xs-6">
		<button type="button" class="btn btn-default mb-2 btn-block active">btn block</button>
	</div>
	<div class="col-xs-6">
		<button type="button" class="btn btn-primary mb-2 btn-block active">btn block</button>
	</div>
</div>