---
layout: default
title: Buttons
---

{% assign states = 'secondary dropdown-toggle,secondary,primary,danger' | split: ',' %}
{% assign states-outlined = 'primary,danger,success' | split: ',' %}

<div class="container">
	<div class="row row-cards">
		<div class="col-6">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Default buttons</h3>
					<div class="row mb-3 sm-gutters">
						<div class="col-auto">
							{% for state in states %}
							<button class="btn btn-{{ state }}">Button</button>
							{% endfor %}
						</div>
						<div class="col">
							<input class="form-control d-inline-block w-auto">
						</div>
					</div>
					<div class="row mb-3 sm-gutters">
						<div class="col-auto">
							{% for state in states %}
							<button class="btn btn-sm btn-{{ state }}">Button</button>
							{% endfor %}
						</div>
						<div class="col">
							<input class="form-control form-control-sm d-inline-block w-auto">
						</div>
					</div>
					<div class="row mb-3 sm-gutters">
						<div class="col-auto">
							{% for state in states %}
							<button class="btn btn-lg btn-{{ state }}">Button</button>
							{% endfor %}
						</div>
						<div class="col">
							<input class="form-control form-control-lg d-inline-block w-auto">
						</div>
					</div>

					<p>
						{% for state in states %}
						<button class="btn btn-{{ state }}"><i class="fe fe-star mr-2"></i>Button</button>
						{% endfor %}
					</p>
					<p>
						{% for state in states %}
						<button class="btn btn-{{ state }} btn-icon"><i class="fe fe-star"></i></button>
						{% endfor %}
					</p>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">
						Outlined buttons
					</h3>
					<p>
						{% for state in states-outlined %}
						<button class="btn btn-outline-{{ state }}">Button</button>
						{% endfor %}
					</p>
					<p>
						{% for state in states-outlined %}
						<button class="btn btn-outline-{{ state }} btn-icon"><i class="fe fe-star mr-2"></i>Button</button>
						{% endfor %}
					</p>
				</div>
			</div>
		</div>
		<div class="col-6">
			<div class="card">
				<div class="card-body">
					<p>
						<button type="button" class="btn btn-facebook"><i class="fa fa-facebook"></i></button>
						<button type="button" class="btn btn-twitter"><i class="fa fa-twitter"></i></button>
						<button type="button" class="btn btn-google"><i class="fa fa-google-plus"></i></button>
						<button type="button" class="btn btn-youtube"><i class="fa fa-youtube"></i></button>
						<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo-square"></i></button>
						<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></i></button>
						<button type="button" class="btn btn-github"><i class="fa fa-github"></i></button>
						<button type="button" class="btn btn-instagram"><i class="fa fa-instagram"></i></button>
						<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest"></i></button>
						<button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
						<button type="button" class="btn btn-rss"><i class="fa fa-rss"></i></button>
						<button type="button" class="btn btn-flickr"><i class="fa fa-flickr"></i></button>
						<button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
					</p>
					<p>
						<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
						<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
						<button type="button" class="btn btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
					</p>
					<p>
						<button type="button" class="btn btn-sm btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
						<button type="button" class="btn btn-sm btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
						<button type="button" class="btn btn-sm btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>