Skip to main content
x
Dartmouth-Hitchcock logo
Summer Flowers 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.

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

Icons

  • Want an arrow? Add a class.

    Read more
    <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.

    Read more

    Read more

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

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

  • When we want an arrow, but no heavy button… Read more

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

0