Show Code

        <button class="ui button">vitae</button>

Show Code

        <button class="ui primary button">occaecati</button>

Show Code

        <button class="ui secondary button">similique</button>

Static Green Custom

Static Green Custom unavailable

Show Code

      <div class="ui grid">
        <div class="two column row">
          <div class="column">
            <h4>Static Green Custom</h4>
            <button class="ui secondary medium custom fluid button">
              <i class="ui icon plus"></i>
              Visit the Marketplace
            </button>
          </div>
          <div class="column">
            <h4>Static Green Custom unavailable</h4>
            <button class="ui secondary medium custom fluid button" disabled>
              <i class="ui icon plus"></i>
              Visit the Marketplace
            </button>
          </div>
      </div>

Show Code

        <button class="ui basic button">veritatis</button>

Any button's size can be adjusted:

Show Code

        <button class="ui mini button">eaque</button>
        <button class="ui tiny button">mollitia</button>
        <button class="ui small button">nostrum</button>
        <button class="ui medium button">nihil</button>
        <button class="ui large button">voluptatum</button>
        <button class="ui big button">ratione</button>
        <button class="ui massive button">est</button>

Any button can have an icon nested inside:

Show Code

        <button class="ui button">
          <i class="plus icon"></i>
          repudiandae
        </button>
        <button class="ui primary button">
          <i class="plus icon"></i>
          consequatur
        </button>
        <button class="ui secondary button">
          <i class="plus icon"></i>
          eaque
        </button>
        <button class="ui basic button">
          <i class="plus icon"></i>
          expedita
        </button>

A fluid button will stretch to fit its container

I'm

stretched

to

fit

Show Code

        <div class="ui grid">
          <div class="row">
            <div class="two wide column">
              <a class="ui fluid button">rem</a>
            </div>
            <div class="three wide column">
              <a class="ui fluid button">sint</a>
            </div>
            <div class="four wide column">
              <a class="ui fluid button">fuga</a>
            </div>
            <div class="six wide column">
              <a class="ui fluid button">et</a>
            </div>
          </div>
        </div>

Primary, Secondary, and Basic buttons can be inverted on colored backgrounds:

Show Code

        <div class="ui grid">
          <div class="row">
            <div class="column blue">
              <button class="ui basic primary button">
                <i class="plus icon"></i>
                Primary basic
              </button>
              <button class="ui basic secondary button">
                <i class="plus icon"></i>
                Secondary basic
              </button>
              <button class="ui basic inverted button">
                <i class="plus icon"></i>
                basic inverted
              </button>
            </div>
          </div>
        </div>

FUNNELS

FOLLOW-UP FUNNELS

PRODUCTS

Product Name

PAGES

All Buttons

Default Button

Primary Button

Secondary Button

Static Green Custom

Static Green Custom unavailable

Basic Button

Button Sizing

Any button's size can be adjusted:

Buttons and Icons

Any button can have an icon nested inside:

Fluid Buttons

A fluid button will stretch to fit its container

Inverted buttons

Primary, Secondary, and Basic buttons can be inverted on colored backgrounds: