Foundation 可以在同一行内建立一系列的按鈕。
可以使用 <code><ul></code> 元素并添加 <code>.button-group</code> 類來建立按鈕組：
<ul class="button-group">
<li><button type="button"
class="button">Apple</button></li>
class="button">Samsung</button></li>
class="button">Sony</button></li>
</ul>
垂直按鈕組使用 <code>.stack</code> 類來建立。注意，按鈕會跨越父元素的整個寬度:
<ul class="button-group stack">
<code>.stack-for-small</code> 類用于小尺寸的螢幕，按鈕有水準排列變為垂直排列：
<ul class="button-group stack-for-small">
按鈕組中使用 <code>.radius</code> 和 <code>.round</code> 類為按鈕添加圓角效果：
<ul class="button-group radius">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
<ul class="button-group round">
<li><button
type="button" class="button">Apple</button></li>
type="button" class="button">Samsung</button></li>
type="button" class="button">Sony</button></li>
<code>.even-num</code> 類用于在按鈕組中均勻的配置設定按鈕的寬度并跨越父元素 100% 寬度。
num 為按鈕組中按鈕的數量，從 1 到 8：
<ul class="button-group even-3">
<ul class="button-group
even-5">
class="button">HTC</button></li>
class="button">Huawei</button></li>
even-8">
<li><button type="button" class="button">A</button></li>
<li><button type="button" class="button">B</button></li>
<li><button type="button" class="button">C</button></li>
<li><button type="button" class="button">D</button></li>
<li><button type="button" class="button">E</button></li>
<li><button type="button" class="button">F</button></li>
<li><button type="button" class="button">G</button></li>
<li><button type="button" class="button">H</button></li>
下拉菜單按鈕可以讓使用者選取設定好的值：
<!-- Trigger the dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
<!-- The actual dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a
href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
<code>.dropdown</code> 類建立一個下拉菜單按鈕。
使用帶有 <code>data-dropdown="id"</code> 屬性的按鈕或連結打開下拉菜單。
id 值需要與下拉菜單的内容 (id01) 比對。
在 <code><ul></code> 中添加 <code>.f-dropdown</code> 類和 <code>data-dropdown-content</code> 屬性來建立下拉菜單的内容。
最後初始化 Foundation JS。
我們也可以建立一個分割按鈕的下拉菜單。隻需要在按鈕中添加 <code>.split</code> 類并使用 span 元素生成一個方向箭的按鈕：
<button class="button split">Split Button
<span
data-dropdown="id01"></span>
</button>
<ul id="id01" data-dropdown-content
class="f-dropdown">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>