預設按鈕
若要建立一個純按鈕，請將 pure-button 類別名稱新增到任何 <a> 或 <button> 元素。
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>已停用按鈕
若要將按鈕標記為已停用，請在 pure-button 旁新增 pure-button-disabled 類別名稱。或者，直接將「disabled」屬性新增至按鈕。
<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button>已啟用按鈕
若要調整按鈕的樣式，使其顯示為「已按下」，請在 pure-button 旁新增 pure-button-active 類別名稱。
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>主要按鈕
若要指出按鈕代表主要操作，請在 pure-button 旁新增 pure-button-primary 類別名稱。
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>自訂按鈕
要感謝 Pure 最小的樣式設定，很容易從一般 Pure 按鈕建立和為你的應用程式建立自訂按鈕。
若要自訂按鈕樣式，你應該將自訂的 CSS 分組到一個類別中，例如 button-foo，然後可以將其新增到已具有 pure-button 類別名稱的元素。以下是某些範例。
具有圓角的彩色按鈕
<div>
<style>
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
/* this is a green */
}
.button-error {
background: rgb(202, 60, 60);
/* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20);
/* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>具有不同大小的按鈕
<div>
<style>
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
<button class="button-xsmall pure-button">Extra Small Button</button>
<button class="button-small pure-button">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="button-large pure-button">Large Button</button>
<button class="button-xlarge pure-button">Extra Large Button</button>
</div>帶有圖示的按鈕
Pure 沒有附帶圖示字型，但我們很樂意搭配現有的圖示字型。在 Pure 按鈕中加入圖示字型很簡單。在下方的範例中，我們正在使用來自 Font Awesome 的圖示字型。將 Font Awesome CSS 檔案 放到網頁上，並在 pure-button 元素中使用 <i> 元素。
<button class="pure-button">
<i class="fa fa-cog"></i>Settings
</button>
<a class="pure-button" href="#">
<i class="fa fa-shopping-cart fa-lg"></i>Checkout
</a>按鈕群組
在單一行中將多個按鈕分組。
<div class="pure-button-group" role="group" aria-label="...">
<button class="pure-button">A Pure Button</button>
<button class="pure-button">A Pure Button</button>
<button class="pure-button pure-button-active">A Pure Button</button>
</div>