Button patterns help solicit action from a user in a clean and consistent manner. These elements are commonly used to submit a form or direct a user's attention towards a primary call-to-action.
Use the .btn-* classes on any element with a .btn class to change that button element's color.
For obvious reasons, the .btn-white style button works best on a dark background. All of the following white button examples have been given a wrapper with a dark background (and some minor padding for aesthetic reasons).
It should be noted that the input background color also changes when the .btn-white class is used. To get the appropriate colors, also add .input-group-white to the wrapper class.
<div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue" type="submit">
Blue
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray" type="submit">
Gray
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray-light" type="submit">
Gray Light
</button>
</span>
</div>
<div class="bg-charcoal soft-quarter">
<div class="input-group input-group-white">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-white" type="submit">
White
</button>
</span>
</div>
</div>To create a disabled Button Input Group, add an attribute of disabled to the input tag and a .disabled class to the button tag.
<div class="input-group">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue disabled" type="submit">
Blue
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray disabled" type="submit">
Gray
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray-light disabled" type="submit">
Gray Light
</button>
</span>
</div>
<div class="bg-charcoal soft-quarter">
<div class="input-group input-group-white">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-white disabled" type="submit">
White
</button>
</span>
</div>
</div><div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray-light" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="bg-charcoal soft-quarter">
<div class="input-group input-group-white">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-white" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
</div><div class="input-group">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue disabled" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray disabled" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-gray-light disabled" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="bg-charcoal soft-quarter">
<div class="input-group input-group-white">
<input class="form-control" disabled="disabled" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-white disabled" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
</div>Adding .input-group-lg or .input-group-sm will increase or decrease your input group element.
<div class="input-group input-group-lg">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue" type="submit">
Large Button Input
</button>
</span>
</div>
<div class="input-group">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue" type="submit">
Default Button Input
</button>
</span>
</div>
<div class="input-group input-group-sm">
<input class="form-control" placeholder="Placeholder" type="text">
<span class="input-group-btn">
<button class="btn btn-blue" type="submit">
Small Button Input
</button>
</span>
</div>