點擊進入查看官網說明

---

不同顏色按鈕：?

<button class="button button-3d button-primary">button1</button><button class="button button-3d button-action">button2</button><button class="button button-3d button-caution">button3</button><button class="button button-3d button-royal">button4</button><button class="button button-3d button-inverse">button5</button><button class="button button-3d button-highlight">button6</button><button class="button button-3d">button7</button>

---

按鈕組：?

<div class="button-group"><button class="button button-raised button-primary">button1</button><button class="button button-raised button-action">button2</button><button class="button button-raised button-caution">button3</button><button class="button button-raised button-royal">button4</button><button class="button button-raised button-inverse">button5</button><button class="button button-raised button-highlight">button6</button><button class="button button-raised">button7</button></div>

?

---

按鈕大小：?

? ? ? ? ? ?

<div><button class="button button-tiny button-primary">button1</button><button class="button button-small button-primary">button2</button><button class="button button-primary">button3</button><button class="button button-large button-primary">button4</button><button class="button button-jumbo button-primary">button5</button></div>

?

---

按鈕形狀：?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

?

<div><span class="button-wrap"><button class="button button-circle"></button></span><span class="button-wrap"><button class="button button-circle button-raised button-primary"></button></span><span class="button-wrap"><button class="button button-pill"></button></span><span class="button-wrap"><button class="button button-pill button-raised button-primary"></button></span></div>

---

堆疊按鈕：?

<div><a href="javascript:;" class="button button-block button-rounded button-large">GO</a><a href="javascript:;" class="button button-block button-rounded button-primary button-large">GO</a><a href="javascript:;" class="button button-block button-rounded button-action button-large">GO</a><a href="javascript:;" class="button button-block button-rounded button-caution button-large">GO</a><a href="javascript:;" class="button button-block button-rounded button-royal button-large">GO</a><a href="javascript:;" class="button button-block button-rounded button-inverse button-large">GO</a><a href="javascript:;" class="button button-block button-rounded button-highlight button-large">GO</a></div>

?

?

總結

以上是生活随笔為你收集整理的Buttons——CSS按钮样式库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。