Button 按鈕

按鈕是由文字及/或圖片所組成，目的是清楚地引導要觸發的動作。

設計
程式碼

按鈕強調與使用頻率

web按鈕順序

app按鈕順序

網頁按鈕類型

適用平台：官網、網銀

種類	Enabled	Hover	Disabled
主要按鈕
主要按鈕	背景色：#00A19B 字級：16px ; 字重：粗體圓角：4px 文字一行至多６個字，超過折兩行文字斷行處可依內文調整，不需強制６個字才可斷行	背景色：#00A19B 透明度80%	背景色：#ACACAC
次要按鈕
次要按鈕	背景色：#00A19B 字級：16px ; 字重：粗體圓角：4px 文字一行至多６個字，超過折兩行文字斷行處可依內文調整，不需強制６個字才可斷行	背景色：#00A19B 透明度80%	背景色：#ACACAC
Icon按鈕		-
Icon按鈕	顏色：#00A19B 按鈕內僅限使用一個icon 可視設計放置於文字前或後	-	背景色：#ACACAC
文字連結		-
文字連結	一律加底線字級：14px ; 字重：正常	-	顏色：#ACACAC
浮動按鈕		-	-
浮動按鈕	網頁自訂義按鈕，顏色依照強調色使用：#F8524C或#EF7800 網頁自訂義按鈕，分為純文字版與icon＋文字版，若字數為6個字以上，必需使用純文字版 ICON大小為：26x26px 除了TOP鈕，最多可再放兩個按鈕 ex.如果有智能客服，那只能再加一個網頁專屬按鈕 ex.如果沒有智能客服，可以放兩個網頁專屬按鈕順序由由下而上是：TOP->客服->自行定義	-	-

app按鈕類型

適用平台：行動銀行

種類	Enabled	Press	Disabled
主要按鈕
主要按鈕	背景色：#00A19B 字級：18px ; 字重：粗體置中於頁面或卡片底部，作用範圍通常為整個頁面或整個區塊。按鈕用途：控制「主流程」的下一步。	背景色：#007A7A	背景色：#ACACAC
次要反向按鈕
次要反向按鈕	背景色：#639896 字級：18px ; 字重：粗體按鈕用途：用於主要流程的「上一步」或是次要功能。	顏色：#007A7A	顏色：#ACACAC
功能按鈕		-	-
功能按鈕	可依強調程度選擇使用線框與底色兩種款式。卡片內的功能型按鈕可以使用高度42px之按鈕;卡片外的功能型按鈕可使用高度32px之按鈕。按鈕用途：對瀏覽的內容做「功能型變更」或「進一步檢視」。	-	-
文字連結		-
文字連結	一律加底線字級：14px ; 字重：正常	-	顏色：#ACACAC

主要按鈕 (btn)

SAMPLE

範例按鈕範例按鈕
雙排文字

HTML

                                            
<a class="btn" href="#">範例按鈕</a>
<a class="btn" href="#">範例按鈕<br>雙排文字</a>

複製

CSS

                                            
.btn {
    width: 100%;
    max-width: 12.5rem;
    height: 4.0625rem;
    border-radius: 4px;
    background: #00a19b;
    color: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    }
    .btn:hover {
    opacity: 0.7;
    }
    .btn:disabled {
    background: #acacac;
    color: #ffffff;
    cursor: not-allowed;
    }
    @media (max-width: 768px) {
    .btn {
        max-width: 8.75rem;
    }
    }

複製

次要按鈕 (btnLine)

SAMPLE

範例按鈕範例按鈕
雙排文字

HTML

                                        
<a class="btnLine" href="#">範例按鈕</a>
<a class="btnLine" href="#">範例按鈕<br>雙排文字</a>

複製

CSS

                                        
.btnLine {
    width: 100%;
    max-width: 12.5rem;
    height: 4.0625rem;
    border-radius: 4px;
    text-align: center;
    border: solid 1px #00a19b;
    color: #00a19b;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    }
    .btnLine:hover {
    opacity: 0.7;
    }
    .btnLine:disabled {
    background: #acacac;
    color: #ffffff;
    border: none;
    cursor: not-allowed;
    }
    @media (max-width: 768px) {
    .btnLine {
        max-width: 8.75rem;
    }
    }

複製

icon按鈕 (btnIcon)

SAMPLE

範例按鈕

HTML

                                                                    
<a class="btnIcon" href="#">
    <img class="btnIcon__img" src="./img/icon-demo.png" alt="圖片說明">範例按鈕
</a>

複製

CSS

                                                                    
.btnIcon {
    color: #00a19b;
    cursor: pointer;
    transition: 0.3s;
    vertical-align: middle;
    }
    .btnIcon img {
    max-width: 1.5rem;
    padding-right: 0.75rem;
    vertical-align: middle;
    }
    .btnIcon:hover {
    opacity: 0.7;
    }

複製

textLink文字連結 (textLink)

SAMPLE

範例連結文字

HTML

                                                                                                
<a href="#" class="textLink">範例連結文字</a>

複製

CSS

                                                                                                
.textLink {
    color: #00a19b;
    font-size: 0.875rem;
    text-decoration: underline;
    }
    .textLink:hover {
    opacity: 0.7;
    }

複製