Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content
Your Search Results

    Buttons 2.0 implementation

    This article gives you all you need to implement v2.0 Gaia-style Buttons in your own app.

    Live sample

    The following gives you an idea of what the rendered buttons would look like.

    Code

    Here is the code you'll need.

    CSS

    <link href="(your styles folder)/style/buttons.css" rel="stylesheet" type="text/css">

    The CSS can be found in the Gaia project 2.0 branch under shared/style/buttons.css. Copy this into your own project, along with the associated resources.

    HTML

    Note: The CSS inside the <style> element isn't needed for the implementation: it is just for the purposes of this example.

    <!doctype html>
<html>
<head>
  <link href="https://mdn.github.io/gaia-2.0-bb/buttons.css" rel="stylesheet" type="text/css">
  <link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    label.bb-docs {
      font-family: sans-serif;
      font-size: 1.2rem;
      margin-left: 1.5rem;
    }

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

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

    div.bb-docs.skin-organic {
      background: #f4f4f4;
    }

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

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

    body[role="application"] > [role="region"] {
      height: 100%;
      position: relative;
    }
  </style>
</head>
<body>

<section style="margin-bottom: 30px">
<!-- Default, primary action, and danger buttons -->
<button>Default</button>
<button class="bb-button recommend">Primary</button>
<button class="danger">Danger</button>
</section>
<section style="margin-bottom: 30px">
<! -- Disabled button examples -->
<div>
  <button disabled="disabled">Default</button>
  <button class="bb-button recommend" aria-disabled="true">Recommend</button>
  <button class="danger" disabled="disabled">Danger</button>
</div>
<div class="skin-dark"><!-- disabled buttons over dark background -->
  <button disabled="disabled">Default</button>
  <button class="recommend" disabled="disabled">Recommend</button>
  <button class="danger" disabled="disabled">Danger</button>
</div>
</section>
<section style="margin-bottom: 30px">
<!-- List buttons -->
<ul style="list-style-type:none;padding:0">
  <li>
    <button>Default</button>
  </li>
  <li>
    <button disabled="disabled">Disabled</button>
  </li>
  <li><button>Action 1</button></li>
  <li><button data-icon="forward">View Name</button></li>
  <li><button data-icon="expand">Tuesday September 18, 2012</button></li>
</ul>
</section>

</body>
</html>

    Document Tags and Contributors

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