markdown-button

# Buttons

You can insert buttons thanks to [unicorn-ui](http://unicorn-ui.com/buttons/) librairy.

### Two classic buttons

<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" class="button button-rounded button-primary">Live Demo</a>&nbsp;&nbsp;&nbsp;<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/ghost/" target="_blank" class="button button-glow button-border button-rounded button-primary"><i class="far fa-keyboard fa-lg"></i> Admin Panel</a>

```
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" class="button button-rounded button-raised button-primary">Live Demo</a>&nbsp;&nbsp;&nbsp;<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/ghost/" target="_blank" class="button button-glow button-border button-rounded button-primary"><i class="far fa-keyboard fa-lg"></i> Admin Panel</a>
```

---


### Shape and Size

Choose from a variety of shapes and sizes.

<a href="https://play-with-ghost.com/" class="button button-tiny">Go</a>
<a href="https://play-with-ghost.com/" class="button button-rounded button-tiny">Go</a>
<a href="https://play-with-ghost.com/" class="button button-pill button-tiny">Go</a>
<a href="https://play-with-ghost.com/" class="button button-square button-tiny"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-box button-tiny"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-circle button-tiny"><i class="fas fa-plus"></i></a>

```
<a href="https://play-with-ghost.com/" class="button button-tiny">Go</a>
<a href="https://play-with-ghost.com/" class="button button-rounded button-tiny">Go</a>
<a href="https://play-with-ghost.com/" class="button button-pill button-tiny">Go</a>
<a href="https://play-with-ghost.com/" class="button button-square button-tiny"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-box button-tiny"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-circle button-tiny"><i class="fas fa-plus"></i></a>
```

---


<a href="https://play-with-ghost.com/" class="button button-action">Click Me</a>
<a href="https://play-with-ghost.com/" class="button button-action button-rounded">Click Me</a>
<a href="https://play-with-ghost.com/" class="button button-action button-pill">Click Me</a>
<a href="https://play-with-ghost.com/" class="button button-action button-square"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-action button-box"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-action button-circle"><i class="fas fa-plus"></i></a>

```
<a href="https://play-with-ghost.com/" class="button button-action">Click Me</a>
<a href="https://play-with-ghost.com/" class="button button-action button-rounded">Click Me</a>
<a href="https://play-with-ghost.com/" class="button button-action button-pill">Click Me</a>
<a href="https://play-with-ghost.com/" class="button button-action button-square"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-action button-box"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-action button-circle"><i class="fas fa-plus"></i></a>
```

---


<a href="https://play-with-ghost.com/" class="button button-highlight button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-rounded button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-pill button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-square button-large"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-box button-large"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-circle button-large"><i class="fas fa-plus"></i></a>

```
<a href="https://play-with-ghost.com/" class="button button-highlight button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-rounded button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-pill button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-square button-large"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-box button-large"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-highlight button-circle button-large"><i class="fas fa-plus"></i></a>
```

---


<a href="https://play-with-ghost.com/" class="button button-caution button-jumbo">Go</a>
<a href="https://play-with-ghost.com/" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="https://play-with-ghost.com/" class="button button-caution button-pill button-jumbo">Go</a>
<a href="https://play-with-ghost.com/" class="button button-caution button-square button-jumbo"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-caution button-box button-jumbo"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-caution button-circle button-jumbo"><i class="fas fa-plus"></i></a>

```
<a href="https://play-with-ghost.com/" class="button button-caution button-jumbo">Go</a>
<a href="https://play-with-ghost.com/" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="https://play-with-ghost.com/" class="button button-caution button-pill button-jumbo">Go</a>
<a href="https://play-with-ghost.com/" class="button button-caution button-square button-jumbo"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-caution button-box button-jumbo"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-caution button-circle button-jumbo"><i class="fas fa-plus"></i></a>
```

---


<a href="https://play-with-ghost.com/" class="button button-royal button-giant">Go</a>
<a href="https://play-with-ghost.com/" class="button button-royal button-rounded button-giant">Go</a>
<a href="https://play-with-ghost.com/" class="button button-royal button-pill button-giant">Go</a>
<a href="https://play-with-ghost.com/" class="button button-royal button-square button-giant"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-royal button-box button-giant"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-royal button-circle button-giant"><i class="fas fa-plus"></i></a>

```
<a href="https://play-with-ghost.com/" class="button button-royal button-giant">Go</a>
<a href="https://play-with-ghost.com/" class="button button-royal button-rounded button-giant">Go</a>
<a href="https://play-with-ghost.com/" class="button button-royal button-pill button-giant">Go</a>
<a href="https://play-with-ghost.com/" class="button button-royal button-square button-giant"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-royal button-box button-giant"><i class="fas fa-plus"></i></a>
<a href="https://play-with-ghost.com/" class="button button-royal button-circle button-giant"><i class="fas fa-plus"></i></a>
```

---


### BORDER & BORDERLESS BUTTONS

Icons provided by Font Awesome Great for mobile devices

<a href="https://play-with-ghost.com/" class="button button-large button-primary button-border button-circle"><i class="fas fa-reply"></i></a>
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-border button-box"><i class="fas fa-star"></i></a>
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-border button-square"><i class="fas fa-trash-alt"></i></a>
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-borderless"><i class="fas fa-tag"></i></a>

```
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-border button-circle"><i class="fas fa-reply"></i></a>
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-border button-box"><i class="fas fa-star"></i></a>
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-border button-square"><i class="fas fa-trash-alt"></i></a>
<a href="https://play-with-ghost.com/" class="button button-large button-primary button-borderless"><i class="fas fa-tag"></i></a>
```

---


### 3D BUTTONS

Mimics the appearance of a real life button

<a href="https://play-with-ghost.com/" class="button button-3d button-box button-jumbo"><i class="fas fa-thumbs-up"></i></a>
<a href="https://play-with-ghost.com/" class="button button-3d button-primary button-rounded">Check out the new site!</a>
<a href="https://play-with-ghost.com/" class="button button-3d button-action button-pill">Visit Us!</a>
<button class="button button-3d button-action button-circle button-jumbo"><i class="fas fa-thumbs-up"></i></button>
<a href="https://play-with-ghost.com/" class="button button-3d button-caution"><i class="fas fa-camera"></i> Go</a>
<a href="https://play-with-ghost.com/" class="button button-3d button-royal">Say Hi!</a>
  
```
<a href="https://play-with-ghost.com/" class="button button-3d button-box button-jumbo"><i class="fas fa-thumbs-up"></i></a>
<a href="https://play-with-ghost.com/" class="button button-3d button-primary button-rounded">Check out the new site!</a>
<a href="https://play-with-ghost.com/" class="button button-3d button-action button-pill">Visit Us!</a>
<button class="button button-3d button-action button-circle button-jumbo"><i class="fas fa-thumbs-up"></i></button>
<a href="https://play-with-ghost.com/" class="button button-3d button-caution"><i class="fas fa-camera"></i> Go</a>
<a href="https://play-with-ghost.com/" class="button button-3d button-royal">Say Hi!</a>
```

---


### RAISED BUTTONS

A classic looking button that offers great depth and affordance

<a href="https://play-with-ghost.com/" class="button button-raised button-primary button-pill">Visit Us!</a>
<a href="https://play-with-ghost.com/" class="button button-raised button-action button-circle button-jumbo"><i class="fas fa-thumbs-up"></i></a>
<a href="https://play-with-ghost.com/" class="button button-raised button-caution"><i class="fas fa-camera"></i> Go</a>
<a href="https://play-with-ghost.com/" class="button button-raised button-royal">Say Hi!</a>
<a href="https://play-with-ghost.com/" class="button button-raised button-pill button-inverse">Say Hi!</a>
  
```
<a href="https://play-with-ghost.com/" class="button button-raised button-primary button-pill">Visit Us!</a>
<a href="https://play-with-ghost.com/" class="button button-raised button-action button-circle button-jumbo"><i class="fas fa-thumbs-up"></i></a>
<a href="https://play-with-ghost.com/" class="button button-raised button-caution"><i class="fas fa-camera"></i> Go</a>
<a href="https://play-with-ghost.com/" class="button button-raised button-royal">Say Hi!</a>
<a href="https://play-with-ghost.com/" class="button button-raised button-pill button-inverse">Say Hi!</a>
```

---


### GLOWING

A pulse like glow around the edges of a button

<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-border button-rounded button-primary">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-circle button-action button-jumbo"><i class="fas fa-thumbs-up"></i></a>
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-highlight">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-caution">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-royal">Go</a>
  
```
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-border button-rounded button-primary">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-circle button-action button-jumbo"><i class="fas fa-thumbs-up"></i></a>
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-highlight">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-caution">Go</a>
<a href="https://play-with-ghost.com/" class="button button-glow button-rounded button-royal">Go</a>
```

---


### BUTTONS GROUPS

A group of related buttons displayed edge to edge

<div class="button-group">
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" type="button" class="button button-primary">Klimax1</a>
<a href="https://play-with-ghost.com/live-demo-firepress-klimax2-for-barbershops/" target="_blank" type="button" class="button button-primary">Klimax2</a>
<a href="https://play-with-ghost.com/live-demo-vapor-for-barbershops/" target="_blank" type="button" class="button button-primary">Vapor</a>
</div>

```
<div class="button-group">
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" type="button" class="button button-primary">Klimax1</a>
<a href="https://play-with-ghost.com/live-demo-firepress-klimax2-for-barbershops/" target="_blank" type="button" class="button button-primary">Klimax2</a>
<a href="https://play-with-ghost.com/live-demo-vapor-for-barbershops/" target="_blank" type="button" class="button button-primary">Vapor</a>
</div>
```

---


<div class="button-group">
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" type="button" class="button button-pill button-action">Klimax1</a>
<a href="https://play-with-ghost.com/live-demo-firepress-klimax2-for-barbershops/" target="_blank" type="button" class="button button-pill button-action">Klimax2</a>
<a href="https://play-with-ghost.com/live-demo-vapor-for-barbershops/" target="_blank" type="button" class="button button-pill button-action">Vapor</a>
</div>

```
<div class="button-group">
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" type="button" class="button button-pill button-action">Klimax1</a>
<a href="https://play-with-ghost.com/live-demo-firepress-klimax2-for-barbershops/" target="_blank" type="button" class="button button-pill button-action">Klimax2</a>
<a href="https://play-with-ghost.com/live-demo-vapor-for-barbershops/" target="_blank" type="button" class="button button-pill button-action">Vapor</a>
</div>
```

---


<div class="button-group">
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" type="button" class="button button-royal button-rounded button-raised">Klimax1</a>
<a href="https://play-with-ghost.com/live-demo-firepress-klimax2-for-barbershops/" target="_blank" type="button" class="button button-royal button-rounded button-raised">Klimax2</a>
<a href="https://play-with-ghost.com/live-demo-vapor-for-barbershops/" target="_blank" type="button" class="button button-royal button-rounded button-raised">Vapor</a>
</div>
  
```
<div class="button-group">
<a href="https://play-with-ghost.com/live-demo-firepress-klimax1-for-barbershops/" target="_blank" type="button" class="button button-royal button-rounded button-raised">Klimax1</a>
<a href="https://play-with-ghost.com/live-demo-firepress-klimax2-for-barbershops/" target="_blank" type="button" class="button button-royal button-rounded button-raised">Klimax2</a>
<a href="https://play-with-ghost.com/live-demo-vapor-for-barbershops/" target="_blank" type="button" class="button button-royal button-rounded button-raised">Vapor</a>
</div>
```

---


### STACKED BUTTONS

Block level buttons that expand the width of their container

<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-primary button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-action button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-highlight button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-caution button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-royal button-large">Go</a>
  
```
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-primary button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-action button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-highlight button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-caution button-large">Go</a>
<a href="https://play-with-ghost.com/" class="button button-block button-rounded button-royal button-large">Go</a>
```

---


### TYOGRAPHIC STYLES

A variety of tyographic styles for buttons

<a href="https://play-with-ghost.com/" class="button button-uppercase button-primary">uppercase</a>
<a href="https://play-with-ghost.com/" class="button button-lowercase button-primary ">lowercase</a>
<a href="https://play-with-ghost.com/" class="button button-capitalize button-primary">capitalize</a>
<a href="https://play-with-ghost.com/" class="button button-small-caps button-primary">small caps</a>
  
```
<a href="https://play-with-ghost.com/" class="button button-uppercase button-primary">uppercase</a>
<a href="https://play-with-ghost.com/" class="button button-lowercase button-primary ">lowercase</a>
<a href="https://play-with-ghost.com/" class="button button-capitalize button-primary">capitalize</a>
<a href="https://play-with-ghost.com/" class="button button-small-caps button-primary">small caps</a>
```