Button
Framework7 comes with a bunch of ready to use buttons. All you need to do is add the appropriate classes to your links or submit/button inputs:
Button Layout
Button layout is pretty simple. Just add button
class to links or submit/button inputs:
<!-- link as button -->
<a class="button">Button</a>
<!-- <button> as button -->
<button class="button">Button</button>
<!-- <input type="submit"> as button -->
<input type="submit" class="button" value="Button">
Button Modifier Classes
There is a variety of different buttons in Framework7. Different button styles achieved by additional modifier classes and their combinations:
button-fill | Filled-style button |
button-fill-ios | Button will have filled-style only in iOS theme |
button-fill-md | Button will have filled-style only in MD theme |
button-fill-aurora | Button will have filled-style only in Aurora theme |
button-round | Rounded button |
button-round-ios | Button will be rounded only in iOS theme |
button-round-md | Button will be rounded only in MD theme |
button-round-aurora | Button will be rounded only in Aurora theme |
button-small | Small button |
button-small-ios | Button will be small only in iOS theme |
button-small-md | Button will be small only in MD theme |
button-small-aurora | Button will be small only in Aurora theme |
button-large | Large button |
button-large-ios | Button will be large only in iOS theme |
button-large-md | Button will be large only in MD theme |
button-large-aurora | Button will be large only in Aurora theme |
button-raised | Raised button |
button-raised-ios | Raised button in iOS theme only |
button-raised-md | Raised button in MD theme only |
button-raised-aurora | Raised button in Aurora theme only |
button-outline | Outline button |
button-outline-ios | Outline button in iOS theme only |
button-outline-md | Outline button in MD theme only |
button-outline-aurora | Outline button in Aurora theme only |
button-active | Active/selected button state. For use inside of Segmented |
color-[color] | Color button, where [color] is one of the default colors |
And of course we can mix these classes:
<!-- rounded button -->
<a class="button button-round">Button</a>
<!-- rounded and filled button -->
<a class="button button-round button-fill">Button</a>
<!-- raised, round, fill, large button -->
<a class="button button-raised button-round button-fill button-large">Button</a>
<!-- small red button -->
<a class="button button-small color-red">Button</a>
Segmented Control
A segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).
Segmented Layout
Segmented control layout is pretty simple, just a <div>
with a segmented
class around buttons:
<div class="segmented">
<a class="button button-active">Tab 1</a>
<a class="button">Tab 2</a>
</div>
Segmented "strong" requires additional element to correctly indicate active state:
<div class="segmented segmented-strong">
<a class="button button-active">Tab 1</a>
<a class="button">Tab 2</a>
<!-- addition element required in segmented strong -->
<span class="segmented-highlight"></span>
</div>
Segmented Modifier Classes
As well as buttons, segmented also supports few additional classes for styling:
segmented-round | Rounded segmented |
segmented-round-ios | Rounded segmented in iOS theme |
segmented-round-md | Rounded segmented in MD theme |
segmented-round-aurora | Rounded segmented in Aurora theme |
segmented-raised | Raised segmented |
segmented-raised-ios | Raised segmented in iOS theme |
segmented-raised-md | Raised segmented in MD theme |
segmented-raised-aurora | Raised segmented in Aurora theme |
segmented-strong | Strong segmented |
segmented-strong-ios | Strong segmented in iOS theme |
segmented-strong-md | Strong segmented in MD theme |
segmented-strong-aurora | Strong segmented in Aurora theme |
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
Note that commented variables are not specified by default and their values is what they fallback to in this case.
:root {
--f7-button-min-width: 32px;
--f7-button-bg-color: transparent;
--f7-button-border-width: 0px;
/*
--f7-button-text-color: var(--f7-theme-color);
--f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
--f7-button-border-color: var(--f7-theme-color);
--f7-button-fill-text-color: #fff;
--f7-button-fill-bg-color: var(--f7-theme-color);
--f7-button-outline-border-color: var(--f7-theme-color);
*/
--f7-button-outline-border-width: 2px;
--f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
--f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
--f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
--f7-segmented-strong-padding: 2px;
--f7-segmented-strong-between-buttons: 4px;
--f7-segmented-strong-button-font-weight: 500;
--f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
--f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
--f7-segmented-strong-button-text-color: #000;
--f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
--f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
--f7-segmented-strong-button-active-text-color: #000;
--f7-segmented-strong-button-active-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
--f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
--f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
--f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
--f7-segmented-strong-button-text-color: #fff;
--f7-segmented-strong-button-active-text-color: #fff;
}
.ios {
--f7-button-font-size: 13px;
--f7-button-height: 28px;
--f7-button-padding-horizontal: 10px;
--f7-button-border-radius: 5px;
--f7-button-font-weight: 600;
--f7-button-letter-spacing: 0;
--f7-button-text-transform: uppercase;
/*
--f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
--f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
*/
--f7-button-large-height: 44px;
--f7-button-large-font-size: 17px;
--f7-button-large-font-weight: 500;
--f7-button-large-text-transform: none;
--f7-button-small-height: 26px;
--f7-button-small-font-size: 13px;
--f7-button-small-font-weight: 600;
--f7-button-small-text-transform: uppercase;
--f7-button-small-outline-border-width: 2px;
--f7-segmented-strong-button-text-transform: none;
--f7-segmented-strong-button-active-font-weight: 600;
}
.md {
--f7-button-font-size: 14px;
--f7-button-height: 36px;
--f7-button-padding-horizontal: 8px;
--f7-button-border-radius: 4px;
--f7-button-font-weight: 500;
--f7-button-letter-spacing: 0.03em;
--f7-button-text-transform: uppercase;
/*
--f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
*/
--f7-button-large-height: 48px;
--f7-button-large-font-size: 14px;
--f7-button-large-font-weight: 500;
--f7-button-large-text-transform: uppercase;
--f7-button-small-height: 28px;
--f7-button-small-font-size: 12px;
--f7-button-small-font-weight: 500;
--f7-button-small-text-transform: uppercase;
--f7-button-small-outline-border-width: 2px;
--f7-segmented-strong-button-text-transform: uppercase;
--f7-segmented-strong-button-active-font-weight: 500;
--f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
}
.md .theme-dark,
.md.theme-dark {
--f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
}
.aurora {
/*
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
--f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
*/
--f7-button-font-size: 14px;
--f7-button-height: 28px;
--f7-button-min-width: 24px;
--f7-button-padding-horizontal: 10px;
--f7-button-border-radius: 4px;
--f7-button-font-weight: 500;
--f7-button-letter-spacing: 0.02;
--f7-button-text-transform: none;
/*
--f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
--f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
*/
--f7-button-large-height: 34px;
--f7-button-large-font-size: 14px;
--f7-button-large-font-weight: 600;
--f7-button-large-text-transform: none;
--f7-button-small-height: 24px;
--f7-button-small-font-size: 12px;
--f7-button-small-font-weight: 600;
--f7-button-small-text-transform: none;
--f7-button-small-outline-border-width: 1px;
--f7-segmented-strong-button-text-transform: none;
--f7-segmented-strong-button-active-font-weight: 600;
}
Examples
Usual Buttons
Add button
class.
<div class="block">
<div class="row">
<button class="button col">Button</button>
<button class="button col">Button</button>
<button class="button col button-round">Round</button>
</div>
</div>
Fill Buttons
Add button-fill
class.
<div class="block">
<div class="row">
<button class="col button button-fill">Button</button>
<button class="col button button-fill">Button</button>
<button class="col button button-fill button-round">Round</button>
</div>
</div>
Outline Buttons
Add button-outline
class.
<div class="block">
<div class="row">
<button class="col button button-outline">Button</button>
<button class="col button button-outline">Button</button>
<button class="col button button-outline button-round">Round</button>
</div>
</div>
Raised Buttons
Add button-raised
class.
<div class="block">
<p class="row">
<button class="col button button-raised">Button</button>
<button class="col button button-raised button-fill">Fill</button>
<button class="col button button-outline button-raised">Outline</button>
</p>
<p class="row">
<button class="col button button-raised button-round">Round</button>
<button class="col button button-raised button-fill button-round">Fill</button>
<button class="col button button-outline button-round button-raised">Outline</button>
</p>
</div>
Segmented Buttons
Put buttons inside of segmented
<div class="block">
<p class="segmented segmented-raised">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button button-active">Active</button>
</p>
<p class="segmented segmented-strong">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button button-active">Active</button>
<span class="segmented-highlight"></span>
</p>
<p class="segmented">
<button class="button button-outline">Outline</button>
<button class="button button-outline">Outline</button>
<button class="button button-outline button-active">Active</button>
</p>
<p class="segmented segmented-raised segmented-round">
<button class="button button-round">Button</button>
<button class="button button-round">Button</button>
<button class="button button-round button-active">Active</button>
</p>
<p class="segmented segmented-round">
<button class="button button-round button-outline">Outline</button>
<button class="button button-round button-outline">Outline</button>
<button class="button button-round button-outline button-active">Active</button>
</p>
</div>
Large Buttons
Add button-large
class.
<div class="block">
<p class="row">
<button class="col button button-large">Button</button>
<button class="col button button-large button-fill">Fill</button>
</p>
<p class="row">
<button class="col button button-large button-raised">Raised</button>
<button class="col button button-large button-raised button-fill">Raised Fill</button>
</p>
</div>
Small Buttons
Add button-small
class.
<div class="block">
<p class="row">
<button class="col button button-small">Button</button>
<button class="col button button-small button-outline">Outline</button>
<button class="col button button-small button-fill">Fill</button>
</p>
<p class="row">
<button class="col button button-small button-round">Button</button>
<button class="col button button-small button-round button-outline">Outline</button>
<button class="col button button-small button-round button-fill">Fill</button>
</p>
</div>
Color Buttons
Add color-[color]
class. Where [color] is one of the default colors.
<div class="block">
<p class="row">
<button class="col button color-red">Red</button>
<button class="col button color-green">Green</button>
<button class="col button color-blue">Blue</button>
</p>
<p class="row">
<button class="col button color-pink">Pink</button>
<button class="col button color-yellow">Yellow</button>
<button class="col button color-orange">Orange</button>
</p>
<p class="row">
<button class="col button color-gray">Gray</button>
<button class="col button color-black">Black</button>
</p>
</div>
Color Fill Buttons
Add button-fill
and color-[color]
class. Where [color] is one of the default colors.
<div class="block">
<p class="row">
<button class="col button button-fill color-red">Red</button>
<button class="col button button-fill color-green">Green</button>
<button class="col button button-fill color-blue">Blue</button>
</p>
<p class="row">
<button class="col button button-fill color-pink">Pink</button>
<button class="col button button-fill color-yellow">Yellow</button>
<button class="col button button-fill color-orange">Orange</button>
</p>
<p class="row">
<button class="col button button-fill color-gray">Gray</button>
<button class="col button button-fill color-black">Black</button>
<button class="col button button-fill color-white text-color-black">White</button>
</p>
</div>