Button

• Button Layout
• Button Modifier Classes
• Segmented Control
• Segmented Layout
• Segmented Modifier Classes
• CSS Variables
• Examples

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:

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

As well as buttons, segmented also supports few additional classes for styling:

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-button-font-size: 14px;
  --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-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);
}
.ios {
  --f7-button-height: 29px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 5px;
  --f7-button-font-weight: 400;
  --f7-button-letter-spacing: 0;
  --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-tint);
  */
  --f7-button-outline-border-width: 1px;
  --f7-button-large-height: 44px;
  --f7-button-large-font-size: 17px;
  --f7-button-large-font-weight: 400;
  --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;
}
.md {
  --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-pressed-bg-color: rgba(0, 0, 0, 0.1);
  /*
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  */
  --f7-button-outline-border-width: 2px;
  --f7-button-large-height: 48px;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 500;
  --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;
}
.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: 400;
  --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-outline-border-width: 2px;
  --f7-button-large-height: 34px;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 600;
  --f7-button-small-height: 22px;
  --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;
}

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

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

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

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

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

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

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

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

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