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.
Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
Sheppy
Last updated by:
chrisdavidmills,