Split Buttons

Split buttons are elements that, depending on what is tapped, either reveal additional content or perform a primary action.

.button.split

Basic

You can create a dropdown with minimal markup.

<a href="#" class="button split">Split Button <span data-dropdown="split-default"></span></a>
<ul id="split-default" data-dropdown-content class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

Split Button

Advanced

Additional classes can be added to your split buttons to change their appearance. All the classes that are available to buttons are available here.

Different sizes:

<a href="#" class="button splittiny">.tiny.split.button <span data-dropdown="split-tiny"></span></a>
<ul id="split-tiny" data-dropdown-content class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

.tiny.split.button

<a href="#" class="button splitsmall">.small.split.button <span data-dropdown="split-small"></span></a>
<ul id="split-small" data-dropdown-content class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

.small.split.button

<a href="#" class="button splitlarge">.large.split.button <span data-dropdown="split-large"></span></a>
<ul id="split-large" data-dropdown-content class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

.large.split.button

Colors:

<a href="#" class="button splitsecondary">.secondary.split.button <span data-dropdown="split-secondary"></span></a>
<ul id="split-secondary" data-dropdown-content class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

.secondary.split.button

<a href="#" class="button splittransparent">.transparent.split.button <span data-dropdown="split-transparent"></span></a>
<ul id="split-transparent" data-dropdown-content class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

.transparent.split.button