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 is pretty simple. Just add class to links or submit/button inputs:

    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:

    1. <!-- rounded button -->
    2. <a class="button button-round">Button</a>
    4. <!-- rounded and filled button -->
    5. <a class="button button-round button-fill">Button</a>
    7. <!-- raised, round, fill, large button -->
    8. <a class="button button-raised button-round button-fill button-large">Button</a>
    10. <!-- small red button -->
    11. <a class="button button-small color-red">Button</a>

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

    1. <div class="segmented">
    2.   <a class="button button-active">Tab 1</a>
    3.   <a class="button">Tab 2</a>
    4. </div>

    Segmented Modifier Classes

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

    segmented-roundRounded segmented
    segmented-round-iosRounded segmented in iOS theme
    segmented-round-mdRounded segmented in MD theme
    segmented-round-auroraRounded segmented in Aurora theme
    segmented-raisedRaised segmented
    segmented-raised-iosRaised segmented in iOS theme
    segmented-raised-mdRaised segmented in MD theme
    segmented-raised-auroraRaised segmented in Aurora theme

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

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    1. :root {
    2.   --f7-button-font-size: 14px;
    3.   --f7-button-min-width: 32px;
    4.   --f7-button-bg-color: transparent;
    5.   --f7-button-border-width: 0px;
    6.   /*
    7.   --f7-button-text-color: var(--f7-theme-color);
    8.   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
    9.   --f7-button-border-color: var(--f7-theme-color);
    10.   --f7-button-fill-text-color: #fff;
    11.   --f7-button-fill-bg-color: var(--f7-theme-color);
    12.   --f7-button-outline-border-color: var(--f7-theme-color);
    13.   */
    14.   --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
    15.   --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
    16.   --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
    17. }
    18. .ios {
    19.   --f7-button-height: 29px;
    20.   --f7-button-padding-horizontal: 10px;
    21.   --f7-button-border-radius: 5px;
    22.   --f7-button-font-weight: 400;
    23.   --f7-button-letter-spacing: 0;
    24.   --f7-button-text-transform: none;
    25.   /*
    26.   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
    27.   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
    28.   */
    29.   --f7-button-outline-border-width: 1px;
    30.   --f7-button-large-height: 44px;
    31.   --f7-button-large-font-weight: 400;
    32.   --f7-button-small-height: 26px;
    33.   --f7-button-small-font-size: 13px;
    34.   --f7-button-small-font-weight: 600;
    35.   --f7-button-small-text-transform: uppercase;
    36.   --f7-button-small-outline-border-width: 2px;
    37. }
    38. .md {
    39.   --f7-button-height: 36px;
    40.   --f7-button-padding-horizontal: 8px;
    41.   --f7-button-border-radius: 4px;
    43.   --f7-button-letter-spacing: 0.03em;
    44.   --f7-button-text-transform: uppercase;
    45.   --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
    46.   /*
    47.   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
    48.   */
    49.   --f7-button-outline-border-width: 2px;
    50.   --f7-button-large-height: 48px;
    51.   --f7-button-large-font-size: 14px;
    52.   --f7-button-large-font-weight: 500;
    53.   --f7-button-small-height: 28px;
    54.   --f7-button-small-font-size: 12px;
    55.   --f7-button-small-font-weight: 500;
    56.   --f7-button-small-text-transform: uppercase;
    57.   --f7-button-small-outline-border-width: 2px;
    58. }
    59. .md .theme-dark,
    60. .md.theme-dark {
    61.   --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
    62. }
    63. .aurora {
    64.   /*
    65.   --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
    66.   --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
    67.   */
    68.   --f7-button-font-size: 14px;
    69.   --f7-button-height: 28px;
    70.   --f7-button-min-width: 24px;
    71.   --f7-button-padding-horizontal: 10px;
    72.   --f7-button-border-radius: 4px;
    73.   --f7-button-font-weight: 400;
    74.   --f7-button-letter-spacing: 0.02;
    75.   --f7-button-text-transform: none;
    76.   /*
    77.   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
    78.   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
    79.   */
    80.   --f7-button-outline-border-width: 2px;
    81.   --f7-button-large-height: 34px;
    82.   --f7-button-large-font-size: 14px;
    83.   --f7-button-large-font-weight: 600;
    84.   --f7-button-small-height: 22px;
    85.   --f7-button-small-font-size: 12px;
    86.   --f7-button-small-font-weight: 600;
    87.   --f7-button-small-text-transform: none;
    88.   --f7-button-small-outline-border-width: 1px;
    89. }

    Usual Buttons

    Add button class.

    Fill Buttons

    Add button-fill class.

    1. <div class="block">
    2.   <div class="row">
    3.     <button class="col button button-fill">Button</button>
    4.     <button class="col button button-fill button-round">Round</button>
    5.   </div>
    6. </div>

    Outline Buttons

    1. <div class="block">
    2.   <div class="row">
    4.     <button class="col button button-outline">Button</button>
    5.     <button class="col button button-outline button-round">Round</button>
    6.   </div>
    7. </div>

    Raised Buttons

    Add button-raised class.

    1. <div class="block">
    2.   <p class="row">
    3.     <button class="col button button-raised">Button</button>
    4.     <button class="col button button-raised button-fill">Fill</button>
    5.     <button class="col button button-outline button-raised">Outline</button>
    6.   </p>
    7.   <p class="row">
    8.     <button class="col button button-raised button-round">Round</button>
    9.     <button class="col button button-raised button-fill button-round">Fill</button>
    10.     <button class="col button button-outline button-round button-raised">Outline</button>
    11.   </p>
    12. </div>

    Segmented Buttons

    Put buttons inside of segmented

    Large Buttons

    Add button-large class.

    1. <div class="block">
    2.   <p class="row">
    3.     <button class="col button button-large">Button</button>
    4.     <button class="col button button-large button-fill">Fill</button>
    5.   </p>
    6.   <p class="row">
    7.     <button class="col button button-large button-raised">Raised</button>
    8.     <button class="col button button-large button-raised button-fill">Raised Fill</button>
    9.   </p>
    10. </div>

    Small Buttons

    Add button-small class.

    1. <div class="block">
    2.   <p class="row">
    3.     <button class="col button button-small">Button</button>
    4.     <button class="col button button-small button-outline">Outline</button>
    5.     <button class="col button button-small button-fill">Fill</button>
    6.   </p>
    7.   <p class="row">
    8.     <button class="col button button-small button-round">Button</button>
    9.     <button class="col button button-small button-round button-outline">Outline</button>
    10.     <button class="col button button-small button-round button-fill">Fill</button>
    11.   </p>
    12. </div>

    Color Buttons

    Add color-[color] class. Where [color] is one of the default colors.

    1. <div class="block">
    2.   <p class="row">
    3.     <button class="col button color-red">Red</button>
    4.     <button class="col button color-green">Green</button>
    5.     <button class="col button color-blue">Blue</button>
    6.   </p>
    7.   <p class="row">
    8.     <button class="col button color-pink">Pink</button>
    9.     <button class="col button color-yellow">Yellow</button>
    10.     <button class="col button color-orange">Orange</button>
    11.   </p>
    12.   <p class="row">
    13.     <button class="col button color-gray">Gray</button>
    14.     <button class="col button color-black">Black</button>
    15.   </p>
    16. </div>

    Color Fill Buttons