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:
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>
Note that, by default, each button in Framework7 is "display:block" and will take 100% of its parent width.
Just add additional active
class to button:
<a href="#" class="button active">Active Button</a>
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>
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>
Note that each button has equal width when in "buttons-row"
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 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>
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>
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>
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>
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>
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>
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>
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>
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>
<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>
<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>
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>
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>
<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>