Material Theme Buttons

Description

The material theme provides many buttons to use in your application by using appropriate classes. The following table lists material theme buttons used in Framework7 −

S.No Types & Description
1

Usual/Flat Buttons

To use flat buttons use button class to your input button.
2

Buttons Row

To use this, wrap buttons with element with class buttons-row.
3

Raised Buttons

Add button-raised class to get raised button styled buttons.
4

Raised Fill Buttons

You can add button-fill class to your input button.
5

Color Buttons

You can use 20 default material color themes to color your buttons.
6

Color Fill Buttons

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

Color Raised Fill Buttons

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

Color Ripple Buttons

Different color ripple effect can be added to your button by using ripple-[color] class.
9

Big Buttons

Button can be made as big button by adding button-big class.
10

List Block Buttons

It is possible to use buttons with list views.

Example

The following example displays the different types of buttons such as color buttons, flat buttons, color fill buttons, big buttons etc. by using the material theme buttons in Framework7 −

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

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as buttons_material.html file in your server root folder.

  • Open this HTML file as http://localhost/buttons_material.html and the output is displayed as shown below.

  • The example provides different types of material theme buttons such as flat buttons, big buttons, row buttons, color buttons, color fill buttons etc.

framework7_buttons.htm
Advertisements