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>

樣式 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:*,而品牌色則是 .tbc:*

.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:beige
.clr:khaki

.tbc:youtube
.tbc:googleplus
.tbc:pinterest
.tbc:weibo
.tbc:rss
.tbc:snapchat
.tbc:whatsapp
.tbc:wechat
.tbc:line
.tbc:slack
.tbc:tumblr
.tbc:behance
.tbc:messager
.tbc:skype
.tbc:dropbox
.tbc:viemo
.tbc:twitter
.tbc:linkedin
.tbc:facebook
.tbc:vk
.tbc:paypal
.tbc:yahoo

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:beige
.clr:khaki

.tbc:youtube
.tbc:googleplus
.tbc:pinterest
.tbc:weibo
.tbc:rss
.tbc:snapchat
.tbc:whatsapp
.tbc:wechat
.tbc:line
.tbc:slack
.tbc:tumblr
.tbc:behance
.tbc:messager
.tbc:skype
.tbc:dropbox
.tbc:viemo
.tbc:twitter
.tbc:linkedin
.tbc:facebook
.tbc:vk
.tbc:paypal
.tbc:yahoo

其他 Others

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


上傳按鈕 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>