Buttons

按鈕的樣式可套用在 <a> , <button> , <input type="button"> , <input type="submit"> , <input type="reset"> 五種標籤上,只要在標籤上加上 .btn 即可。

Button
<a class="btn">Button</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Button" />
<input type="Submit" class="btn" value="Submit" />
<input type="Reset" class="btn" value="Reset" />

如果要把按鈕的樣式套在其他標籤上也是可以的,除非有特殊用途,否則不建議這麼用。

Button
Button
<div class="btn">Button</div>
<span class="btn">Button</span>

配色

每一個 .btn 都能夠配上有用意的顏色,預設則為灰白色。

<a class="btn">預設</a>
<a class="btn color-primary">主色系</a>
<a class="btn color-secondary">次色系</a>
<a class="btn color-focus">關注色</a>
<a class="btn color-common">通用色</a>
<a class="btn color-success">成功的</a>
<a class="btn color-warning">危險的</a>
<a class="btn color-error">錯誤的</a>

顯示關注中的按鈕,可加上 .focus,顯示樣式會與 :hover 相同。

<a class="btn focus">預設</a>
<a class="btn color-primary focus">主色系</a>
<a class="btn color-secondary focus">次色系</a>
<a class="btn color-focus focus">關注色</a>
<a class="btn color-common focus">通用色</a>
<a class="btn color-success focus">成功的</a>
<a class="btn color-warning focus">危險的</a>
<a class="btn color-error">錯誤的</a>

作用中的按鈕可以加上 .active 以表示作用中,樣式與 :active 相同。

<a class="btn active">預設</a>
<a class="btn color-primary active">主色系</a>
<a class="btn color-secondary active">次色系</a>
<a class="btn color-focus active">關注色</a>
<a class="btn color-common active">通用色</a>
<a class="btn color-success active">成功的</a>
<a class="btn color-warning active">危險的</a>
<a class="btn color-error active">錯誤的</a>

每個按鈕都能夠加上 [disabled] 或是 .disabled 以表示禁用狀態。

<a class="btn disabled">預設</a>
<a class="btn color-primary disabled">主色系</a>
<a class="btn color-secondary disabled">次色系</a>
<a class="btn color-focus disabled">關注色</a>
<a class="btn color-common disabled">通用色</a>
<a class="btn color-success disabled">成功的</a>
<a class="btn color-warning disabled">危險的</a>
<a class="btn color-error disabled">錯誤的</a>

尺寸

每一個 .btn 除了預設大小之外,另外都還能設定四種尺寸,只要加上 .size-xs , .size-sm , .size-lg , .size-xl 就能顯示不同尺寸的按鈕。

<a class="btn size-xs">迷你按鈕</a>
<a class="btn size-sm">小尺寸</a>
<a class="btn">預設尺寸</a>
<a class="btn size-lg">大尺寸</a>
<a class="btn size-xl">超大尺寸</a>

按鈕因為用途較多,並且為了之後 Lazy 有更多不同主題、模組以及更多組合,因此 .btn 另外還有 .size-xxs , 以及 .size-xxl,但這兩個尺寸只會用在某些組件或是樣板上。

<a class="btn size-xxs">極小按鈕</a>
<a class="btn size-xxl">極大尺寸</a>

Outline Style

除了 .btn 之外,這次還新增了 .btn-outline 樣式,適合用在 Banner、有背景的區域等等。.btn-outline 可獨立使用,不需搭配 .btn,並且能夠使用在 <a> , <button> , <input type="button"> , <input type="submit"> , <input type="reset"> 五種標籤上。

Button
<a class="btn-outline">Button</a>
<button class="btn-outline">Button</button>
<input type="button" class="btn-outline" value="Button" />
<input type="Submit" class="btn-outline" value="Submit" />
<input type="Reset" class="btn-outline" value="Reset" />

每個 .btn-outline 都能夠跟 .btn 一樣套上多種配色以及各種尺寸,當然 .focus 以及 .active 也都能用。

<a class="btn-outline">預設</a>
<a class="btn-outline color-primary">主色系</a>
<a class="btn-outline color-secondary">次色系</a>
<a class="btn-outline color-focus">關注色</a>
<a class="btn-outline color-common">通用色</a>
<a class="btn-outline color-success">成功的</a>
<a class="btn-outline color-warning">危險的</a>
<a class="btn-outline color-error">錯誤的</a>

<a class="btn-outline size-xs">迷你按鈕</a>
<a class="btn-outline size-sm">小尺寸</a>
<a class="btn-outline">預設尺寸</a>
<a class="btn-outline size-lg">大尺寸</a>
<a class="btn-outline size-xl">超大尺寸</a>

.btn-outline.btn 多了白色的配色,只要加上 .color-white

<a class="btn-outline color-white">白色</a>

其它樣式

Rounded

每一個 .btn.btn-outline 都能夠加上 .btn-rounded ,讓按鈕呈現圓潤的樣式。

<a class="btn btn-rounded size-xs">迷你按鈕</a>
<a class="btn btn-rounded size-sm">小尺寸</a>
<a class="btn btn-rounded">預設尺寸</a>
<a class="btn btn-rounded size-lg">大尺寸</a>
<a class="btn btn-rounded size-xl">超大尺寸</a>

Flat

可以在 .btn 加上 .btn-flat,使用限定於 .btn 上。

<a class="btn btn-flat">按鈕</a>
<a class="btn btn-flat color-primary">按鈕</a>

按鈕型連結

可以在 <a> 標籤上使用 .btn-link,可單獨使用。

<a class="btn color-primary">按鈕</a>
<a class="btn-link">我是連結</a>

上傳檔案按鈕

可在 .btn.btn-outline 加上 .btn-upload,並且在標籤內再加上 <input type="file" />

<label class="btn color-primary">
    上傳檔案
    <input type="file" />
</label>