Buttons

This section shows the different button styles and classes you can use.

---

Default Buttons

Default Button Dark Button Empty Button

 

<a href="#" class="button">Default Button</a>
<a href="#" class="button dark">Dark Button</a>
<a href="#" class="button empty">Empty Button</a>

---

Button Colors

Button Grey Button Green Button Orange Button Purple Button Blue

 

<a href="#" class="button button-grey">Button Grey</a>
<a href="#" class="button button-green">Button Green</a>
<a href="#" class="button button-orange">Button Orange</a>
<a href="#" class="button button-purple">Button Purple</a>
<a href="#" class="button button-blue">Button Blue</a>

---

Button Icons

Default Button Dark Button Empty Button Button Green Button Purple

 

<a href="#" class="button"><i class="fa fa-fw fa-download"></i> Default Button</a>
<a href="#" class="button dark"><i class="fa fa-fw fa-star"></i> Dark Button</a>
<a href="#" class="button empty"><i class="fa fa-fw fa-lock"></i> Empty Button</a>
<a href="#" class="button button-green"><i class="fa fa-fw fa-clock-o"></i> Button Green</a>
<a href="#" class="button button-purple"><i class="fa fa-fw fa-arrows"></i> Button Purple</a>

---

Button Sizes

Button XLarge Button Large Button Medium Button Small Button XSmall

 

<a href="#" class="button button-xlarge">Button XLarge</a>
<a href="#" class="button dark button-large">Button Large</a>
<a href="#" class="button empty button-medium">Button Medium</a>
<a href="#" class="button button-green button-small">Button Small</a>
<a href="#" class="button button-purple button-xsmall">Button XSmall</a>

---

Button Block

Default Button
Dark Button
Empty Button

 

<a href="#" class="button button-block">Default Button</a>
<a href="#" class="button dark button-block">Dark Button</a>
<a href="#" class="button empty button-block">Empty Button</a>

NOTEYou can also use additional UIkit classes for the buttons. You will find more details here.