Buttons in Ensemble can be created from simple anchor tags, button elements, or inputs. Buttons come in 3 different sizes, small (which is the default size), medium, and large.

Buttons are coloured according to your current themes colour scheme, using the button element button__brand-color-1 to button__brand-color-6

<button class="button button__brand-color-1 text-color-10">Brand color 1</button>
<button class="button button__brand-color-2 text-color-10">Brand color 2</button>
<button class="button button__brand-color-3 text-color-10">Brand color 3</button>
<button class="button button__brand-color-4 text-color-10">Brand color 4</button>
<button class="button button__brand-color-5 text-color-10">Brand color 5</button>
<button class="button button__brand-color-6 text-color-10">Brand color 6</button>

Button sizing

There are 3 different sized buttons available in Ensemble, small, medium and large.

The small button size, which is default, does not require any additional class, medium uses the class button__medium, and the large button size uses the class button__large.

<a class="button text-color-10" href="#">Small</a>
<a class="button button__medium text-color-10" href="#">Medium</a>
<a class="button button__large text-color-10" href="#">Large</a>

Ghost buttons

Ghost buttons can be easily created in Ensemble. Ghost buttons come in light, dark and mid-tone colours.

 *Dark background for illustrative purpose only
Creating ghost buttons is simple, just add the appropriate class to your button markup button--dark-ghost class gives you a very dark ghost button. button--mid-ghost class gives you a mid-tone ghost button, and button button--light-ghost class gives you a light ghost button for use on very dark backgrounds*.

<button class="button button--dark-ghost">Dark Ghost</button>
<button class="button button--mid-ghost">Mid-colour Ghost</button>
<button class="button button--light-ghost">Light Ghost</button>

Warning buttons

Ensemble also has a set of buttons coloured in the same way as the success, warning and failure notices.

Using the warning colours is as easy as adding the appropriate class, button__green for success, button__amber for warning, and, button__red for failure.

<button class="button button__green text-color-10">Warning Green</button>
<button class="button button__amber text-color-10">Warning Amber</button>
<button class="button button__red text-color-10">Warning Red</button>

Generic buttons

Ensemble also features a set of buttons that can be set to be any colour you wish. These colours can be adjusted in your CSS, or, if you are using SCSS these button colours can be changed in the config file.

There are 4 generic buttons, that can be adjusted to any colour you wish.

<button class="button button__color-1 text-color-10">Generic 1</button>
<button class="button button__color-2 text-color-10">Generic 2</button>
<button class="button button__color-3 text-color-10">Generic 3</button>
<button class="button button__color-4 text-color-10">Generic 4</button>

Pill Buttons

Pill buttons have an attractive rounded shape, and provide a smooth alternative to standard square buttons.

Pill buttons simply need the class button--pill to transform a standard button.

<button class="button button--pill button__color-1 text-color-10">Small Pill</button>
<button class="button button--pill button__medium text-color-10">Medium Pill</button>
<button class="button button--pill button__large text-color-10">Large Pill</button>

Icon buttons

You can use any of the bundled icons to create eye catching buttons, they will scale automatically to match your button text.

Icon buttons simply need the icon placing before the button text.

<button class="button button--dark-ghost">
	<i class="ion-ios-briefcase"></i> Icon Ghost Button
<button class="button button--pill button__medium button__brand-color-1  text-color-10">
	<i class="ion-ios-calendar"></i> Icon Pill Button
<button class="button button__color-1 text-color-10">
	<i class="ion-ios-chatboxes"></i> Icon Standard Button