Defiant CSS

Examples

Boring Default Buttons

Here we have the boring default buttons. Nothing exciting but they look better than the browser defaults.

Default Boring Default Buttons

<a href="#" class="btn">Anchor Button</a>
<button class="btn">Button Element</button>
<input type="submit" class="btn" value="Submit Input">

Context Buttons

Here you can add a splash of colour to your life by adding some context to your buttons.

Default Context Buttons

<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-secondary">btn-secondary</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-danger">btn-danger</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-info">btn-info</button>

Levitating Buttons

Here we have some magical levitating buttons. Designed to lift you when your feeling down.

Default Levitating Buttons

<button class="btn btn-levitate btn-primary">btn-levitate btn-primary</button>
<button class="btn btn-levitate btn-secondary">btn-levitate btn-secondary</button>
<button class="btn btn-levitate btn-success">btn-levitate btn-success</button>
<button class="btn btn-levitate btn-danger">btn-levitate btn-danger</button>
<button class="btn btn-levitate btn-warning">btn-levitate btn-warning</button>
<button class="btn btn-levitate btn-info">btn-levitate btn-info</button>

Cool Expanding Buttons

There is nothing more to say than "wow these are cool"! Well actually there is one minor caveat.... The expand/retract effect doesn't work on input elements. Inputs can't use ::before and ::after pseudo classes apparently which is a shame.

Default Cool Expanding Buttons

<button class="btn btn-expand btn-primary">btn-expand btn-primary</button>
<button class="btn btn-expand btn-secondary">btn-expand btn-secondary</button>
<button class="btn btn-expand btn-success">btn-expand btn-success</button>
<button class="btn btn-expand btn-danger">btn-expand btn-danger</button>
<button class="btn btn-expand btn-warning">btn-expand btn-warning</button>
<button class="btn btn-expand btn-info">btn-expand btn-info</button>

Outline Buttons

Here we peer into the soul of your buttons and just see their outline. However if you hover over them then that brings some colour back into their cheeks.

Default Outline Buttons

<button class="btn btn-outline">btn-outline</button>
<button class="btn btn-outline-primary">btn-outline-primary</button>
<button class="btn btn-outline-secondary">btn-outline-secondary</button>
<button class="btn btn-outline-success">btn-outline-success</button>
<button class="btn btn-outline-danger">btn-outline-danger</button>
<button class="btn btn-outline-warning">btn-outline-warning</button>
<button class="btn btn-outline-info">btn-outline-info</button>

Pulsing Buttons

Here we have the life and soul of the button world with pulsing buttons dancing away to the latest songs in the button world... or something like that anway.

Default Pulsing Buttons

<button class="btn btn-pulse">btn-pulse</button>
<button class="btn btn-primary btn-pulse">btn-primary btn-pulse</button>
<button class="btn btn-secondary btn-pulse">btn-secondary btn-pulse</button>
<button class="btn btn-success btn-pulse">btn-success btn-pulse</button>
<button class="btn btn-danger btn-pulse">btn-danger btn-pulse</button>
<button class="btn btn-warning btn-pulse">btn-warning btn-pulse</button>
<button class="btn btn-info btn-pulse">btn-info btn-pulse</button>

Large Buttons

Use these large buttons when you want to make a BIG impression!

Default Large Buttons

<button class="btn btn-large btn-primary">btn-large</button>
<button class="btn btn-large btn-secondary">btn-large</button>
<button class="btn btn-large btn-success">btn-large</button>
<button class="btn btn-large btn-danger">btn-large</button>
<button class="btn btn-large btn-warning">btn-large</button>
<button class="btn btn-large btn-info">btn-large</button>

Small Buttons

When your looking for buttons on the smaller side check these wee fella's out.

Default Small Buttons

<button class="btn btn-small btn-primary">btn-small</button>
<button class="btn btn-small btn-secondary">btn-small</button>
<button class="btn btn-small btn-success">btn-small</button>
<button class="btn btn-small btn-danger">btn-small</button>
<button class="btn btn-small btn-warning">btn-small</button>
<button class="btn btn-small btn-info">btn-small</button>

Buttons With Icons

Here you can have buttons with icons alongside your text. Pretty cool indeed!

Default Buttons With Icons

<button class="btn btn-primary">Submit <i class="material-icons">send</i></button>
<button class="btn btn-secondary">Undo <i class="material-icons">undo</i></button>
<button class="btn btn-success">Redo <i class="material-icons">redo</i></button>
<button class="btn btn-danger">Delete <i class="material-icons">delete</i></button>
<button class="btn btn-warning">Add <i class="material-icons">add</i></button>
<button class="btn btn-info">Create <i class="material-icons">create</i></button>