mozilla
Your Search Results

    Coding guide: Buttons

    Download resources

    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

    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

    Contributors to this page: Sheppy, chrisdavidmills
    Last updated by: chrisdavidmills,