Kule Lazy 4

Button

Lazy4 的 Button 有獨立三種模式：預設 Button、文字 Text、外框 Outline。

按鈕的狀態可分為普通狀態、已啟用 .is:on 以及停用，停用狀態可用 .is:off 或 [disabled]。

每種按鈕模式除了預設之外都有四種基本色，包含 Primary .clr:primary、Secondary .clr:secondary、Dark .clr:dark、Light .clr:light。過去舊版的狀態色皆已移除，像是 Success, Warning, Error 等。請引導使用者按下期望的目標，如果像是取消、關閉、放棄、刪除等等負面語意可使用文字按鈕，而非使用容易受到矚目的紅色按鈕。

Button

Button 樣式可套用於 <a>、<button>、<input type="button">、<input type="submit">、<input type="reset"> 五種標籤上，只要在標籤上加上 .btn 即可。

Hyperlink
超連結
<a class="btn">Button</a> <button class="btn">Button</button> <input type="submit" class="btn"> <input type="reset" class="btn"> <input type="button" class="btn">

如果要將 Button 樣式套用於其他標籤也是可行的，如果你真的需要這麼做的話。

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

尺寸 Sizes

Button 除了預設之外還有四種尺寸可以選擇，請見以下表格：

高 字級
預設 2.5rem (~40px) 1rem (~16px)
sz:xs 1.5rem (~24px) .75rem (~12px)
sz:sm 2rem (~32px) .875rem (~14px)
sz:lg 3rem (~48px) 1.25rem (~20px)
sz:xl 4rem (~64px) 1.5rem (~24px)
<button class="btn sz:xs"></button> <button class="btn sz:sm"></button> <button class="btn"></button> <button class="btn sz:lg"></button> <button class="btn sz:xl"></button>

區塊顯示 Block

ver 4.1

在 .btn 加上 .:block 能得到寬度滿版樣式。

<button class="btn :block"></button>

樣式 Styles

Button 提供三種樣式，包含：圓形 Circle、正方形 Square、圓角 Rounded，每種樣式都可套用不同尺寸樣式。

:circle
:square
:rounded
<button class="btn :circle"></button> <button class="btn :square"></button> <button class="btn :rounded"></button>

配色 Color

Button 除了基本配色之外，也有提供色票群與品牌色。基本色、色票群與品牌色用法皆為 .clr:{顏色代碼}}。

.clr:primary
.clr:secondary
.clr:dark
.clr:light
<button class="btn clr:primary"></button> <button class="btn clr:secondary"></button> <button class="btn clr:dark"></button> <button class="btn clr:light"></button>
.clr:red
.clr:orange
.clr:fire
.clr:yellow
.clr:olive
.clr:sapphire
.clr:cyan
.clr:magenta
.clr:bone
.clr:silver
.clr:momo
.clr:rosewood
.clr:skin
.clr:chartreuse
.clr:green
.clr:aegean
.clr:blue
.clr:violet
.clr:brown
.clr:gray
.clr:black
.clr:youtube
.clr:google
.clr:pinterest
.clr:weibo
.clr:rss
.clr:snapchat
.clr:whatsapp
.clr:wechat
.clr:line
.clr:slack
.clr:tumblr
.clr:behance
.clr:messager
.clr:skype
.clr:dropbox
.clr:viemo
.clr:twitter
.clr:linkedin
.clr:facebook
.clr:vk
.clr:paypal
.clr:yahoo
.clr:vue
.clr:react
.clr:angular

Text

文字按鈕的使用方式為 .btn-text，與 Button 相同都能用在超連結或是各類型按鈕上。

Hyperlink
超連結
<a class="btn-text">Button</a> <button class="btn-text">Button</button> <input type="submit" class="btn-text"> <input type="reset" class="btn-text"> <input type="button" class="btn-text">

尺寸 Sizes

文字按鈕只提供 .sz:lg 與 .sz:xl。

<button class="btn-text sz:lg"></button> <button class="btn-text sz:xl"></button>

配色 Color

文字按鈕只提供四個基本色。使用方式為 .clr:*。

<button class="btn-text clr:primary"></button> <button class="btn-text clr:secondary"></button> <button class="btn-text clr:dark"></button> <button class="btn-text clr:light"></button>

Outline

外框模式基本上皆與預設模式相同，只有樣式上的不同。使用類別為 .btn-outline。

Hyperlink
超連結
<a class="btn-outline">Button</a> <button class="btn-outline">Button</button> <input type="submit" class="btn-outline"> <input type="reset" class="btn-outline"> <input type="button" class="btn-outline">

尺寸 Sizes

使用方式與 Button 相同，可參照上述尺寸表。

<button class="btn-outline sz:xs"></button> <button class="btn-outline sz:sm"></button> <button class="btn-outline"></button> <button class="btn-outline sz:lg"></button> <button class="btn-outline sz:xl"></button>

樣式 Styles

與 Button 相同提供三種樣式，包含：圓形 Circle、正方形 Square、圓角 Rounded，每種樣式也都可套用不同尺寸樣式。

:circle
:square
:rounded
<button class="btn-outline :circle"></button> <button class="btn-outline :square"></button> <button class="btn-outline :rounded"></button>

配色 Color

與 Button 相同提供四種基本色、色票群與品牌色。使用方式也相同。

.clr:primary
.clr:secondary
.clr:dark
.clr:light
<button class="btn-outline clr:primary"></div> <button class="btn-outline clr:secondary"></div> <button class="btn-outline clr:dark"></div> <button class="btn-outline clr:light"></div>
.clr:red
.clr:orange
.clr:fire
.clr:yellow
.clr:olive
.clr:sapphire
.clr:cyan
.clr:magenta
.clr:bone
.clr:silver
.clr:momo
.clr:rosewood
.clr:skin
.clr:chartreuse
.clr:green
.clr:aegean
.clr:blue
.clr:violet
.clr:brown
.clr:gray
.clr:black
.clr:youtube
.clr:google
.clr:pinterest
.clr:weibo
.clr:rss
.clr:snapchat
.clr:whatsapp
.clr:wechat
.clr:line
.clr:slack
.clr:tumblr
.clr:behance
.clr:messager
.clr:skype
.clr:dropbox
.clr:viemo
.clr:twitter
.clr:linkedin
.clr:facebook
.clr:vk
.clr:paypal
.clr:yahoo
.clr:vue
.clr:react
.clr:angular

其他

包含上傳、關閉等特殊設定或其餘用途的按鈕。

上傳按鈕 Upload

上傳按鈕要搭配 <input type="file">，所以使用上較為特別。請將 <label> 加上按鈕樣式且加上 :upload，並將 <input type="file"> 置入其中就能完成。同時可以搭配尺寸、配色等各種樣式變化。

<label class="btn :upload"> <input type="file"> 上傳按鈕 </label> <label class="btn-text :upload"> <input type="file"> 上傳按鈕 </label> <label class="btn-outline :upload"> <input type="file"> 上傳按鈕 </label>

關閉 Close

使用 .btn-close即可，另外提供小尺寸的關閉按鈕 .sz:sm。預設是以 CSS 繪製關閉按鈕圖形，也可以置入 HTML character codes 或使用 Iconfont

Empty
HTML Character Codes
Iconfont
<button class="btn-close"></button> <button class="btn-close sz:sm"></button> <button class="btn-close">×</button> <button class="btn-close sz:sm">×</button> <button class="btn-close"> <i class="icon"></i> </button> <button class="btn-close sz:sm"> <i class="icon"></i> </button>