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:

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.

Big 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

Fill Buttons is almost similar as active but intended to be used as single button which slightly shows a different effect on click/tap:

Color Buttons

You can use 10 default color themes to colorize buttons.

List Block Buttons

You can use buttons with list-views.

Using Grid

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:

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.

Buttons Row

To use button rows, you have to wrap buttons with element with buttons-row class.

Raised Buttons

Use "button-raised" class to get raised styled buttons.

Raised Fill Buttons

Use button-fill class to your input button.

Color Buttons

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.

Big Buttons

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: