In This Section

Buttons

Button text should be written in sentence case. Try to restrict button text to three words or less.

Sizes

The default button size is small and needs no additional size class.
Read more
```
<a href="" class="dh-btn">Read more</a>
```
If you want a smaller button, throw in a tiny class.
Read more
```
<a href="" class="dh-btn dh-btn--tiny">Read more</a>
```
If you want a bigger button, we have a medium class.
Read more
```
<a href="" class="dh-btn dh-btn--medium">Read more</a>
```

We also have a large class.

<a href="" class="dh-btn dh-btn--large">Read more</a>

Icons

Want an arrow? Add a class.

<a href="" class="dh-btn dh-btn--arrow">Read more</a>

Color

If you'd like the arrow to be a different color, we have an alternate that works with the pallette.
Read more
```
<a href="" class="dh-btn dh-btn--color-alt--arrow">Read more</a>
```
Here's an example with a different background color.
Read more
```
<a href="" class="dh-btn dh-btn--color-alt">Read more</a>
```
Here's an example with a different background color, and an arrow.
Read more
```
<a href="" class="dh-btn dh-btn--color-alt dh-btn--arrow">Read more</a>
```

Sometimes we need a white button on a dark background.

<p class="float_left">
<a href="" class="dh-btn dh-btn--medium dh-btn--white">Read more</a>
</p>
<p class="float_left">
<a href="" class="dh-btn dh-btn--medium dh-btn--white dh-btn--color-alt--arrow">Read more</a>
</p>

Sometimes we need a ghost button on a dark background.

<a href="" class="dh-btn dh-btn--medium dh-btn--ghost">Read more</a>

Width

By default, buttons conform to the width of their text, but sometimes we might want them to fill the width of their container.
Read more
```
<a href="" class="dh-btn dh-btn--medium dh-btn--wide">Read more</a>
```

Text as button