Buttons

Framework7 comes with a bunch of ready to use buttons. All you need is to just add appropriate classes to your links or submit/button inputs:

iOS Theme Buttons

Usual Buttons

Just add button class to any link or button input:

<p><a href="#" class="button">Usual Button 1</a></p>
<p><a href="#" class="button">Usual Button 2</a></p>
<p><a href="#" class="button">Usual Button 3</a></p>          

Active State

Just add additional active class to button:

<a href="#" class="button active">Active Button</a>

Round Buttons

Add additional button-round class to button:

<p><a href="#" class="button button-round">Round Button 1</a></p>
<p><a href="#" class="button button-round">Round Button 2</a></p>
<p><a href="#" class="button button-round active">Round Button Active</a></p>          

Big Buttons

Add additional button-big class to button:

<a href="#" class="button button-big">Big Button </a>
<a href="#" class="button button-big button-round">Big Round Button </a>
<a href="#" class="button button-big button-round active">Big Round Active Button </a>          

Buttons Row / Segmented Control

Just wrap buttons with element with buttons-row class:

<p class="buttons-row">
  <a href="#" class="button">Button 1</a>
  <a href="#" class="button">Button 2</a>
  <a href="#" class="button">Button 3</a>
</p>
<p class="buttons-row">
  <a href="#" class="button active">Button 1</a>
  <a href="#" class="button">Button 2</a>
  <a href="#" class="button">Button 3</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-round">Button 1</a>
  <a href="#" class="button button-round">Button 2</a>
</p>
<p class="buttons-row">
  <a href="#" class="button button-round">Button 1</a>
  <a href="#" class="button button-round active">Button 2</a>
</p>            

Fill Buttons

Fill Buttons looks almost the same as active but indended to be used as single buttons which also have a bit different effect on click/tap:

<a href="#" class="button button-fill">Fill Button </a>
<a href="#" class="button button-round button-fill">Round Fill Button</a>
<a href="#" class="button button-big button-fill">Big Fill Button </a>

Color Buttons

You can use 10 default color themes to colorize buttons

<p class="buttons-row theme-pink">
    <a href="#" class="button active">Button 1</a>
    <a href="#" class="button">Button 2</a>
    <a href="#" class="button">Button 3</a>
</p>
<p class="buttons-row theme-orange">
    <a href="#" class="button">Button 1</a>
    <a href="#" class="button active">Button 2</a>
    <a href="#" class="button">Button 3</a>
</p>
<p><a href="#" class="button button-fill color-green">Green</a></p>
<p><a href="#" class="button button-fill color-red button-round">Round Red</a></p>
<p><a href="#" class="button button-big button-fill color-gray">Big Gray</a></p>
<p><a href="#" class="button button-fill button-big color-yellow">Big Yellow</a></p>          

List Block Buttons

We can use buttons with our favourite List Views:

<div class="content-block-title">List block buttons</div>
<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link list-button">List Button 1</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 2</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 3</a>
    </li>
  </ul>
</div>
<div class="content-block-title">Inset list block buttons</div>
<div class="list-block inset">
  <ul>
    <li>
      <a href="#" class="item-link list-button">List Button 1</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 2</a>
    </li>
    <li>
      <a href="#" class="item-link list-button">List Button 3</a>
    </li>
  </ul>
</div>          

Using Grid

And of course, you can place buttons anywhere where you want and need. Here is example using Grid:

<div class="row">
  <div class="col-50">
    <a href="#" class="button button-big button-red">Cancel</a>
  </div>
  <div class="col-50">
    <a href="#" class="button button-big button-green">Submit</a>
  </div>
</div>          

Material Theme Buttons

Usual/Flat Buttons

As in iOS Theme just add button class to any link or button input:

<p><a href="#" class="button">Button</a></p>
<p><a href="#" class="button">Button</a></p>          

Buttons Row

Just wrap buttons with element with buttons-row class:

<p class="buttons-row">
  <a href="#" class="button">Button</a>
  <a href="#" class="button">Button</a>
</p>          

Raised Buttons

Add button-raised class to button:

<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>          

Raised Fill Buttons

Add button-fill class to button:

<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>          

Color Buttons

You can use 20 default Material color themes to colorize buttons

<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>          

Color Fill Buttons

<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>          

Color Raised Fill Buttons

<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>          

Color Ripple Buttons

To add ripple of different color, just add ripple-[color] class to button

<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>          

Big Buttons

Add button-big class to button

<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>          

List Block Buttons

<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>