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>
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>