Show Sections Hide Sections

Buttons

Basic Buttons

Each of the following will be treated as a button:

<button>Button</button>
<input type='button' value='Input Button' />
<input type='submit' value='Submit Button' />
<input type='reset' value='Reset Button' />
<a href='./' class='button'>Link Button</a>

Link Button

From this point forward we will be using the standard <button> for exmaples.

Button Colors

By default, buttons will be the secondary color with white text. This can be changed by giving it a class with the name of the color you would like it to be.

<button class='brown'>brown</button>
<button class='blue'>blue</button>
<button class='green'>green</button>
<button class='yellow'>yellow</button>
<button class='red'>red</button>
<button class='primary'>primary</button>
<button class='secondary'>secondary</button>
<button class='success'>success</button>
<button class='warning'>warning</button>
<button class='error'>error</button>
<button class='black'>black</button>
<button class='dark'>dark</button>
<div class='bg-dark margin-bottom padding-left'>
  <button class='white'>white</button>
  <button class='light'>light</button>
</div>

Button Styles

Box Buttons

<button class='box brown'>brown</button>
<button class='box blue'>blue</button>
<button class='box green'>green</button>
<button class='box yellow'>yellow</button>
<button class='box red'>red</button>
<button class='box primary'>primary</button>
<button class='box secondary'>secondary</button>
<button class='box success'>success</button>
<button class='box warning'>warning</button>
<button class='box error'>error</button>
<button class='box black'>black</button>
<button class='box dark'>dark</button>
<div class='bg-dark margin-bottom padding-left'>
  <button class='box white'>white</button>
  <button class='box light'>light</button>
</div>

Ghost Buttons

<button class='ghost brown'>brown</button>
<button class='ghost blue'>blue</button>
<button class='ghost green'>green</button>
<button class='ghost yellow'>yellow</button>
<button class='ghost red'>red</button>
<button class='ghost primary'>primary</button>
<button class='ghost secondary'>secondary</button>
<button class='ghost success'>success</button>
<button class='ghost warning'>warning</button>
<button class='ghost error'>error</button>
<button class='ghost black'>black</button>
<button class='ghost dark'>dark</button>
<div class='bg-dark margin-bottom padding-left'>
  <button class='ghost white'>white</button>
  <button class='ghost light'>light</button>
</div>

Button Sizes

<button class='sm'>Small</button>
<button>Normal</button>
<button class='lg'>Large</button>
<button class='sm full'>Small Full</button>
<button class='full'>Normal Full</button>
<button class='lg full'>Large Full</button>

Buttons

Basic Buttons

Button Colors

Button Styles

Box Buttons

Ghost Buttons

Button Sizes

Help and Support

More Information

Company Info

Shop AmericanMeadows.com