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-fillFilled-style button
button-fill-iosButton will have filled-style only in iOS theme
button-fill-mdButton will have filled-style only in MD theme
button-tonalTonal-style button
button-tonal-iosButton will have tonal-style only in iOS theme
button-tonal-mdButton will have tonal-style only in MD theme
button-roundRounded button
button-round-iosButton will be rounded only in iOS theme
button-round-mdButton will be rounded only in MD theme
button-smallSmall button
button-small-iosButton will be small only in iOS theme
button-small-mdButton will be small only in MD theme
button-largeLarge button
button-large-iosButton will be large only in iOS theme
button-large-mdButton will be large only in MD theme
button-raisedRaised button
button-raised-iosRaised button in iOS theme only
button-raised-mdRaised button in MD theme only
button-outlineOutline button
button-outline-iosOutline button in iOS theme only
button-outline-mdOutline button in MD theme only
button-activeActive/selected button state. For use inside of Segmented
button-preloaderShould be added to button with preloader to make loading buttons
button-loadingControls button state to show/hide preloader and hide/show button text (switch button to loading state). button-preloader should be also added to button
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>

Preloader Button

It is possible to create dynamic preloader button. Such button must have Preloader inside and button text wrapped with <span> tag, and additional button-preloader class:

<button class="button button-preloader">
  <span class="preloader"></span>
  <span>Load</span>
</button>

And to show preloader we need to add extra button-loading class (it will show inner preloader and hide button text):

<button class="button button-preloader button-loading">
  <span class="preloader"></span>
  <span>Load</span>
</button>

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-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-bg-color: var(--f7-theme-color);
  --f7-button-padding-vertical: 0px;
  */
  --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-button-text-color: #000;
  --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 .dark,
:root.dark {
  --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-fill-text-color: #fff;
  --f7-button-text-transform: uppercase;
  --f7-button-height: 28px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 4px;
  --f7-button-font-weight: 600;
  --f7-button-letter-spacing: 0;
  /*
  --f7-button-outline-border-color: var(--f7-theme-color);
  */
  --f7-button-outline-border-width: 2px;
  /*
  --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-text-transform: uppercase;
  --f7-button-large-height: 44px;
  --f7-button-large-font-size: 17px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-outline-border-width: 2px;
  --f7-button-small-text-transform: uppercase;
  --f7-button-small-height: 26px;
  --f7-button-small-font-size: 13px;
  --f7-button-small-font-weight: 600;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 600;
  --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
  --f7-button-tonal-text-color: var(--f7-theme-color);
  --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
}
.ios .dark,
.ios.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);
}
.md {
  /*
  --f7-button-pressed-bg-color: transparent;
  */
  --f7-button-text-transform: none;
  --f7-button-height: 40px;
  --f7-button-padding-horizontal: 16px;
  --f7-button-border-radius: 8px;
  --f7-button-font-weight: 500;
  --f7-button-letter-spacing: normal;
  --f7-button-outline-border-width: 1px;
  --f7-button-large-text-transform: none;
  --f7-button-large-height: 48px;
  --f7-button-large-font-size: 14px;
  --f7-button-large-font-weight: 500;
  --f7-button-small-text-transform: none;
  --f7-button-small-outline-border-width: 1px;
  --f7-button-small-height: 32px;
  --f7-button-small-font-size: 14px;
  --f7-button-small-font-weight: 500;
  --f7-segmented-strong-button-text-transform: none;
  --f7-segmented-strong-button-active-font-weight: 500;
  --f7-segmented-strong-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-button-fill-pressed-bg-color: transparent;
  --f7-button-fill-text-color: var(--f7-md-on-primary);
  --f7-button-outline-border-color: var(--f7-md-outline);
  --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
  --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
  --f7-button-tonal-pressed-bg-color: transparent;
  --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
}

Examples

buttons.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Buttons</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block-title">Usual Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Tonal Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-tonal">Button</button>
          <button class="button button-tonal">Button</button>
          <button class="button button-tonal button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Fill Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-fill">Button</button>
          <button class="button button-fill">Button</button>
          <button class="button button-fill button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Outline Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-outline">Button</button>
          <button class="button button-outline">Button</button>
          <button class="button button-outline button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Raised Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-raised">Button</button>
          <button class="button button-raised button-fill">Fill</button>
          <button class="button button-outline button-raised">Outline</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-raised button-round">Round</button>
          <button class="button button-raised button-fill button-round">Fill</button>
          <button class="button button-outline button-round button-raised">Outline</button>
        </p>
      </div>

      <div class="block-title">Large Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large">Button</button>
          <button class="button button-large button-fill">Fill</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large button-raised">Raised</button>
          <button class="button button-large button-raised button-fill">Raised Fill</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large button-round">Round</button>
          <button class="button button-large button-round button-fill">Round Fill</button>
        </p>
      </div>

      <div class="block-title">Small Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-small">Button</button>
          <button class="button button-small button-outline">Outline</button>
          <button class="button button-small button-fill">Fill</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-small button-round">Button</button>
          <button class="button button-small button-round button-outline">Outline</button>
          <button class="button button-small button-round button-fill">Fill</button>
        </p>
      </div>
      <div class="block-title">Color Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button color-red">Red</button>
          <button class="button color-green">Green</button>
          <button class="button color-blue">Blue</button>
        </p>
      </div>

      <div class="block-title">Preloader Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <span>
            <button class="button button-large button-preloader ${isLoading1 ? 'button-loading' : ''}" @click=${load1}>
              <span class="preloader"></span>
              <span>Load</span>
            </button>
          </span>
          <span>
            <button class="button button-large button-fill button-preloader ${isLoading2 ? 'button-loading' : ''}"
              @click=${load2}>
              <span class="preloader"></span>
              <span>Load</span>
            </button>
          </span>
        </p>
      </div>

      <div class="block-title">Color Fill Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-red">Red</button>
          <button class="button button-fill color-green">Green</button>
          <button class="button button-fill color-blue">Blue</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-pink">Pink</button>
          <button class="button button-fill color-yellow">Yellow</button>
          <button class="button button-fill color-orange">Orange</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-black">Black</button>
          <button class="button button-fill color-white">White</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let isLoading1 = false;
    let isLoading2 = false;

    const load1 = () => {
      if (isLoading1) return;
      isLoading1 = true;
      $update();
      setTimeout(() => {
        isLoading1 = false;
        $update();
      }, 4000);
    };
    const load2 = () => {
      if (isLoading2) return;
      isLoading2 = true;
      $update();
      setTimeout(() => {
        isLoading2 = false;
        $update();
      }, 4000);
    };

    return $render;
  }
</script>