Market buttons

—  Display download links for different mobile app stores.

Basic example

<!-- App Store button -->
<a href="#" class="market-btn apple-btn" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">App Store</span>
</a>

<!-- Google Play button -->
<a href="#" class="market-btn google-btn" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">Google Play</span>
</a>

<!-- Windows store button -->
<a href="#" class="market-btn windows-btn" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">Windows Store</span>
</a>

<!-- Amazon button -->
<a href="#" class="market-btn amazon-btn" role="button">
  <span class="market-button-subtitle">Order now at</span>
  <span class="market-button-title">Amazon.com</span>
</a>
// App Store button
a(href="#", role="button").market-btn.apple-btn
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | App Store

// Google Play button
a(href="#", role="button").market-btn.google-btn
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | Google Play

// Windows store button
a(href="#", role="button").market-btn.windows-btn
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | Windows Store

// Amazon button
a(href="#", role="button").market-btn.amazon-btn
  span.market-button-subtitle
    | Order now at
  span.market-button-title
    | Amazon.com

Dark version

<!-- App Store button -->
<a href="#" class="market-btn apple-btn market-btn-light bg-dark" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">App Store</span>
</a>

<!-- Google Play button -->
<a href="#" class="market-btn google-btn market-btn-light bg-dark" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">Google Play</span>
</a>

<!-- Windows store button -->
<a href="#" class="market-btn windows-btn market-btn-light bg-dark" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">Windows Store</span>
</a>

<!-- Amazon button -->
<a href="#" class="market-btn amazon-btn market-btn-light bg-dark" role="button">
  <span class="market-button-subtitle">Order now at</span>
  <span class="market-button-title">Amazon.com</span>
</a>
// App Store button
a(href="#", role="button").market-btn.market-btn-light.apple-btn.bg-dark
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | App Store

// Google Play button
a(href="#", role="button").market-btn.market-btn-light.google-btn.bg-dark
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | Google Play

// Windows store button
a(href="#", role="button").market-btn.market-btn-light.windows-btn.bg-dark
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | Windows Store

// Amazon button
a(href="#", role="button").market-btn.market-btn-light.amazon-btn.bg-dark
  span.market-button-subtitle
    | Order now at
  span.market-button-title
    | Amazon.com

Light version

<!-- App Store button -->
<a href="#" class="market-btn apple-btn market-btn-light" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">App Store</span>
</a>

<!-- Google Play button -->
<a href="#" class="market-btn google-btn market-btn-light" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">Google Play</span>
</a>

<!-- Windows store button -->
<a href="#" class="market-btn windows-btn market-btn-light" role="button">
  <span class="market-button-subtitle">Download on the</span>
  <span class="market-button-title">Windows Store</span>
</a>

<!-- Amazon button -->
<a href="#" class="market-btn amazon-btn market-btn-light" role="button">
  <span class="market-button-subtitle">Order now at</span>
  <span class="market-button-title">Amazon.com</span>
</a>
// App Store button
a(href="#", role="button").market-btn.market-btn-light.apple-btn
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | App Store

// Google Play button
a(href="#", role="button").market-btn.market-btn-light.google-btn
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | Google Play

// Windows store button
a(href="#", role="button").market-btn.market-btn-light.windows-btn
  span.market-button-subtitle
    | Download on the
  span.market-button-title
    | Windows Store

// Amazon button
a(href="#", role="button").market-btn.market-btn-light.amazon-btn
  span.market-button-subtitle
    | Order now at
  span.market-button-title
    | Amazon.com