framework7.angular/kitchen-sink-material/forms-buttons.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="form-buttons" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="forms.html" class="back link"><i class="icon icon-back"></i></a></div>
      <div class="center">Buttons</div>
      <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block-title">Flat Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button">Button</a><a href="#" class="button">Button</a><a href="#" class="button">Button</a></p>
      <p class="buttons-row"><a href="#" class="button">Button</a><a href="#" class="button">Button</a></p>
    </div>
    <div class="content-block-title">Raised Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button button-raised">Button</a><a href="#" class="button button-raised">Button</a><a href="#" class="button button-raised">Button</a></p>
    </div>
    <div class="content-block-title">Raised Fill Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button button-fill button-raised">Button</a><a href="#" class="button button-fill button-raised">Button</a><a href="#" class="button button-fill button-raised">Button</a></p>
    </div>
    <div class="content-block-title">Color Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button color-red">Red</a><a href="#" class="button color-green">Green</a><a href="#" class="button color-blue">Blue</a></p>
      <p class="buttons-row"><a href="#" class="button color-orange">Orange</a><a href="#" class="button color-pink">Pink</a><a href="#" class="button color-purple">Purple</a></p>
      <p class="buttons-row"><a href="#" class="button color-cyan">Cyan</a><a href="#" class="button color-teal">Teal</a><a href="#" class="button color-indigo">Indigo</a></p>
    </div>
    <div class="content-block-title">Color Fill Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button button-fill color-red">Red</a><a href="#" class="button button-fill color-green">Green</a><a href="#" class="button button-fill color-blue">Blue</a></p>
      <p class="buttons-row"><a href="#" class="button button-fill color-orange">Orange</a><a href="#" class="button button-fill color-pink">Pink</a><a href="#" class="button button-fill color-purple">Purple</a></p>
      <p class="buttons-row"><a href="#" class="button button-fill color-cyan">Cyan</a><a href="#" class="button button-fill color-teal">Teal</a><a href="#" class="button button-fill color-indigo">Indigo</a></p>
    </div>
    <div class="content-block-title">Color Raised Fill Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button button-raised button-fill color-red">Red</a><a href="#" class="button button-raised button-fill color-green">Green</a><a href="#" class="button button-raised button-fill color-blue">Blue</a></p>
      <p class="buttons-row"><a href="#" class="button button-raised button-fill color-orange">Orange</a><a href="#" class="button button-raised button-fill color-pink">Pink</a><a href="#" class="button button-raised button-fill color-purple">Purple</a></p>
      <p class="buttons-row"><a href="#" class="button button-raised button-fill color-cyan">Cyan</a><a href="#" class="button button-raised button-fill color-teal">Teal</a><a href="#" class="button button-raised button-fill color-indigo">Indigo</a></p>
    </div>
    <div class="content-block-title">Color Ripple Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button ripple-blue">Button</a><a href="#" class="button color-green ripple-pink">Button</a><a href="#" class="button color-teal ripple-amber">Button</a></p>
      <p class="buttons-row"><a href="#" class="button button-raised button-fill color-orange ripple-green">Button</a><a href="#" class="button button-raised button-fill color-pink ripple-blue">Button</a><a href="#" class="button button-raised button-fill color-purple ripple-yellow">Button</a></p>
    </div>
    <div class="content-block-title">Big Buttons</div>
    <div class="content-block">
      <p class="buttons-row"><a href="#" class="button button-big color-green">Button</a><a href="#" class="button button-big color-red">Button</a></p>
      <p class="buttons-row"><a href="#" class="button button-big button-fill button-raised color-pink">Button</a><a href="#" class="button button-big button-fill button-raised color-teal">Button</a></p>
    </div>
    <div class="content-block-title">List Block Buttons</div>
    <div class="card">
      <div class="list-block">
        <ul>
          <li><a href="#" class="list-button item-link">List Button 1</a></li>
          <li><a href="#" class="list-button item-link">List Button 2</a></li>
          <li><a href="#" class="list-button item-link">List Button 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>