Framework7 Buttons

Framework7 provides a lot of ready to use buttons. You just have to add appropriate classes to your links or submit/button inputs to use these buttons.

iOS Theme Buttons

Usual Buttons

It can achieved by using 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: By default, each button in Framework7 is “display:block” and will take 100% of its parent width.

Active State

Just add additional active class to button to make your button active.

Round Buttons

The button-round class is used to add round buttons.

  <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

You can use the big button by adding button-big class to your input 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

If you want to get segmented buttons row, you have to wrap the buttons with buttons-row class. Each button will be of equal width.

  <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 is almost similar as active but intended to be used as single button which slightly shows a 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

You can use buttons with 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

You can place buttons anywhere in the grid according to your requirements.

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

iOS Theme Button Example

Let’s take an example to demonstrate iOS theme buttons:

  <!DOCTYPE html>  <html class = “with-statusbar-overlay”>       <head>        <meta name = “viewport” content = “width = device-width, initial-scale = 1,            maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui” />        <meta name = “apple-mobile-web-app-capable” content = “yes” />        <meta name = “apple-mobile-web-app-status-bar-style” content = “black” />        <title>iOS Theme Buttons</title>        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” />        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” />        <link rel = “stylesheet”            href=”../custom.css” />     </head>       <body>        <div class = “views”>           <div class = “view view-main”>              <div class = “pages”>                 <div data-page = “home” class = “page navbar-fixed”>                    <div class = “navbar”>                       <div class = “navbar-inner”>                          <div class = “left”> </div>                          <div class = “center”>Buttons</div>                          <div class = “right”> </div>                       </div>                    </div>                                        <div class = “page-content”>                       <div class = “content-block-title”>Usual Buttons</div>                       <div class = “content-block”>                          <p> <a href=”#” class = “button”>Usual Button</a></p>                       </div>                                              <div class = “content-block-title”>Active Button</div>                       <div class = “content-block”>                          <p> <a href=”#” class = “button active”>Active Button</a></p>                       </div>                                              <div class = “content-block-title”>Round Buttons</div>                       <div class = “content-block”>                          <p> <a href=”#” class = “button button-round”>Round Button</a></p>                          <p> <a href=”#” class = “button button-round active”>Round Button With Active</a></p>                       </div>                                              <div class = “content-block-title”>Big Buttons</div>                       <div class = “content-block”>                          <p> <a href=”#” class = “button button-big”>Big Button </a></p>                                                    <p> <a href=”#” class = “button button-big button-round”>Rounded Big Button </a></p>                                                    <p> <a href=”#”   class = “button button-big button-round active”>Rounded Big Button and Active</a></p>                       </div>                                              <div class = “content-block-title”>Buttons Row / Segmented Controller</div>                       <div class = “content-block”>                          <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 button-round”>Button 1</a>  <a href=”#” class = “button button-round”>Button 2</a></p>                       </div>                                              <div class = “content-block-title”>Fill buttons </div>                       <div class = “content-block”>                          <p><a href=”#” class = “button button-fill”>Fill Button</a></p>                          <p><a href=”#” class = “button button-big button-fill”>Big Fill Button </a></p>                       </div>                                              <div class = “content-block-title”>Color buttons</div>                       <div class = “content-block”>                          <p class = “buttons-row theme-blue”>                             <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-yellow”>                             <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-big button-fill color-pink”>Big Pink</a></p>                                                    <p><a href=”#” class = “button button-fill button-big color-gray”>Big Gray Button</a></p>                       </div>                                              <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>                             <li><a href=”#” class = “item-link list-button”>List Button 4</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>                             <li><a href=”#” class = “item-link list-button”>List Button 4</a></li>                          </ul>                       </div>                                              <div class = “content-block-title”>Using Grid</div>                       <div class = “content-block”>                          <div class = “row”>                             <div class = “col-50″><     a href=”#” class = “button button-big button-fill color-blue”>Submit</a></div>                             <div class = “col-50″><     a href=”#” class = “button button-big button-fill color-red”>Cancel</a></div>                          </div>                       </div>                                           </div>                 </div>              </div>           </div>        </div>                <script type = “text/javascript”            src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>        <script>var myApp = new Framework7();</script>     </body>    </html>  

Test it Now

Material Theme Buttons

The Material theme is used to provide many button to use in your application by using appropriate classes.

Following is a list of material theme buttons:

Usual/Flat Buttons

If you want to use flat button, use button class to your input button.

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

Buttons Row

To use button rows, you have to 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

Use “button-raised” class to get raised styled buttons.

  <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

Use button-fill class to your input 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 color your 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

You can use color fill buttons by applying button-fill and color classes.

  <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

You can use color raised fill buttons by applying button-raised, button-fill and color classes.

  <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

If you want 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

To make your button big, 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

You can also use buttons with list views.

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

Material Theme Buttons Example

Let’s take an example to demonstrate Material theme buttons:

  <!DOCTYPE html>  <html class = “with-statusbar-overlay”>     <head>        <meta name = “viewport” content = “width = device-width, initial-scale = 1,            maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui” />        <meta name = “apple-mobile-web-app-capable” content = “yes” />        <meta name = “apple-mobile-web-app-status-bar-style” content = “black” />        <title>iOS Theme Buttons</title>        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css” />        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css” />     </head>       <body>        <div class = “views”>           <div class = “view view-main”>              <div class = “pages”>                 <div data-page = “home” class = “page navbar-fixed”>                                        <div class = “navbar”>                       <div class = “navbar-inner”>                          <div class = “center”>Buttons</div>                       </div>                    </div>                                        <div class = “page-content”>                       <div class = “content-block-title”>Usual/Flat Buttons</div>                       <div class = “content-block”>                          <p><a href=”#” class = “button”>Button</a></p>                       </div>                                              <div class = “content-block-title”>Buttons Row</div>                       <div class = “content-block”>                          <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>                             <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>                             <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-pink”>Pink</a>                             <a href=”#” class = “button color-indigo”>Indigo</a>                             <a href=”#” class = “button color-blue”>Blue</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#” class = “button color-cyan”>Cyan</a>                             <a href=”#” class = “button color-green”>Green</a>                             <a href=”#” class = “button color-purple”>Purple</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#” class = “button color-orange”>Orange</a>                             <a href=”#” class = “button color-teal”>Teal</a>                             <a href=”#” class = “button color-red”>Red</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-pink”>Pink</a>                             <a href=”#” class = “button button-fill color-indigo”>Indigo</a>                             <a href=”#” class = “button button-fill color-blue”>Blue</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#” class = “button button-fill color-cyan”>Cyan</a>                             <a href=”#” class = “button button-fill color-green”>Green</a>                             <a href=”#” class = “button button-fill color-purple”>Purple</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#” class = “button button-fill color-orange”>Orange</a>                             <a href=”#” class = “button button-fill color-teal”>Teal</a>                             <a href=”#” class = “button button-fill color-red”>Red</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-fill button-raised color-pink”>Pink</a>                             <a href=”#” class = “button button-fill button-raised color-indigo”>Indigo</a>                             <a href=”#” class = “button button-fill button-raised color-blue”>Blue</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#” class = “button button-fill button-raised color-cyan”>Cyan</a>                             <a href=”#” class = “button button-fill button-raised color-green”>Green</a>                             <a href=”#” class = “button button-fill button-raised color-purple”>Purple</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#” class = “button button-fill button-raised color-orange”>Orange</a>                             <a href=”#” class = “button button-fill button-raised color-teal”>Teal</a>                             <a href=”#” class = “button button-fill button-raised color-red”>Red</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-cyan ripple-green”>Button with green ripple</a>                             <a href=”#”      class = “button color-red ripple-gray”>Button with gray ripple</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#”      class = “button button-raised button-fill color-yellow ripple-green”>Button</a>                             <a href=”#”      class = “button button-raised button-fill color-purple ripple-teal”>Button</a>                             <a href=”#”      class = “button button-raised button-fill color-pink ripple-orange”>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-pink”>Button</a>                             <a href=”#”      class = “button button-big color-blue”>Button</a>                          </p>                                                    <p class = “buttons-row”>                             <a href=”#”      class = “button button-big button-fill button-raised color-green”>Button</a>                             <a href=”#”      class = “button button-big button-fill button-raised color-gray”>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 3</a></li>                                <li><a href=”#”     class = “list-button item-link”>List Button 4</a></li>                             </ul>                          </div>                       </div>                                           </div>                 </div>              </div>           </div>        </div>                <script type = “text/javascript”            src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>                   <script>           var myApp = new Framework7({              material: true           });        </script>     </body>    </html>  

Test it Now

Next TopicFramework7 Action Button

Framework7 Buttons

Framework7 Buttons

iOS Theme Buttons

Usual Buttons

Note: By default, each button in Framework7 is “display:block” and will take 100% of its parent width.

Active State

Round Buttons

Big Buttons

Buttons Row / Segmented Control

Fill Buttons

Color Buttons

List Block Buttons

Using Grid

iOS Theme Button Example

Material Theme Buttons

Usual/Flat Buttons

Buttons Row

Raised Buttons

Raised Fill Buttons

Color Buttons

Color Fill Buttons

Color Raised Fill Buttons

Color Ripple Buttons

Big Buttons

List Block Buttons

Material Theme Buttons Example

Income tax calculating formula in Excel

Framework7 Inline Tabs

You may also like