Coding guide: Buttons

Here you can find examples of how to create buttons on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

Implementing buttons

To implement a banner using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

@import url(resources/buttons.css);

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

Example

HTML to create the buttons

The HTML below creates a number of buttons, showing different styles of them.

<h2 class="bb-docs">Normal</h2>
<div class="bb-docs">
  <button>Default</button>
  <button class="recommend">Recommend</button>
  <button class="danger">Danger</button>
 </div>

<h2 class="bb-docs">Disabled</h2>
<div class="bb-docs">
  <button disabled>Default</button>
  <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
  <button disabled class="danger">Danger</button>
</div>

<h2 class="bb-docs">Disabled with dark background</h2>
<div class="bb-docs dark">
  <button disabled>Default</button>
  <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
  <button disabled class="danger">Danger</button>
</div>

<h2 class="bb-docs">Button List </h2>
<div class="bb-docs">
  <ul>
    <li>
      <button>Default</button>
    </li>
    <li>
      <button disabled="disabled">Disabled</button>
    </li>
    <li>
      <button class="icon icon-view">
        View Name
      </button>
    </li>
    <li>
      <button disabled="disabled" class="icon icon-view">
        View Name
      </button>
    </li>
    <li>
      <a role="button" class="icon icon-dialog">
        Tuesday September 18, 2012
      </a>
    </li>
    <li>
      <a role="button" aria-disabled="true" class="icon icon-dialog">
        Tuesday September 18, 2012
      </a>
    </li>
  </ul>
</div>

<h2 class="bb-docs">Button list (compact mode)</h2>
<div class="bb-docs">
  <ul class="compact">
    <li><button>Action 1</button></li>
    <li><button>Action 2</button></li>
    <li><button disabled >Action 3 (disabled)</button></li>
    <li><button>Action 4</button></li>
    <li><button>Action 5</button></li>
    <li>
      <button>
      <span class="end tick"></span>
        Action 6
      </button>
    </li>
  </ul>
</div>

CSS

 
@import url(https://developer.mozilla.org/media/gaia/shared/style/buttons.css); 
 
@import url('https://developer.mozilla.org/media/css/gaia.css'); 
 
html, body { 
  margin: 0; 
  padding: 0; 
  font-size: 10px; 
  height: 100%; 
  overflow-x: hidden; 
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed; 
} 
 
body { background: none; } 

h2.bb-docs {
  font-size: 1.8rem;
  font-family: "MozTT", Sans-serif;
  font-weight: lighter;
  color: #666;
  margin: -0.1rem 0 0;
  background-color: #f5f5f5;
  padding: 0.4rem 0.4rem 0.4rem 3rem;
  border: solid 0.1rem #e8e8e8;
}

div.bb-docs {
  padding: 1rem;
}

div.bb-docs.dark {
  background: #000;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

Working demo

You can try out the buttons in this live demonstration.