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
It can achieved by using button class to any link or button input:
Note: By default, each button in Framework7 is "display:block" and will take 100% of its parent width.
Just add additional active class to button to make your button active.
The button-round class is used to add round buttons.
You can use the big button by adding button-big class to your input button.
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.
Fill Buttons is almost similar as active but intended to be used as single button which slightly shows a different effect on click/tap:
You can use 10 default color themes to colorize buttons.
List Block Buttons
You can use buttons with list-views.
You can place buttons anywhere in the grid according to your requirements.
iOS Theme Button Example
Let's take an example to demonstrate iOS theme buttons: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:
If you want to use flat button, use button class to your input button.
To use button rows, you have to wrap buttons with element with buttons-row class.
Use "button-raised" class to get raised styled buttons.
Raised Fill Buttons
Use button-fill class to your input button.
You can use 20 default Material color themes to color your buttons.
Color Fill Buttons
You can use color fill buttons by applying button-fill and color classes.
Color Raised Fill Buttons
You can use color raised fill buttons by applying button-raised, button-fill and color classes.
Color Ripple Buttons
If you want to add ripple of different color, just add ripple-[color] class to button.
To make your button big, add button-big class to button.
List Block Buttons
You can also use buttons with list views.
Material Theme Buttons Example
Let's take an example to demonstrate Material theme buttons:Test it Now
Next TopicFramework7 Action Button