# Button 按鈕（Lize）
###### tags: `HyUI` `Lize`

:::warning
檔案名稱：sass / element / <span class="focus2">_btn.scss</span>
:::
* 按鈕三種寫法：ａ、input、button
* 按鈕三種狀態：default、disabled、readonly
* 按鈕三種樣式：主要、次要、一般
* 按鈕可添加icon，icon預設黑色、白色
* 按鈕可添加顏色
* 按鈕可添加大小

<iframe height="600" style="width: 100%;" scrolling="no" title="Button / " src="https://codepen.io/Lize/embed/qBrLrXV?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Lize/pen/qBrLrXV'>Button / 按鈕</a> by Lize wu
(<a href='https://codepen.io/Lize'>@Lize</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

<style>
/* 顏色設定 <span class="blue"></span>*/
.title{
font-size: 26px; color: #fff;
background:#00469C; display:inline-block;
padding: 10px 20px 10px 30px;
border-radius: 4px;
}
.sub-title{ font-size: 20px; color: #00469C; }
.box{
padding: 1em 2em;
background:#f5f5f5;
margin: 10px 0;
border: solid 1px #aaa;
}

.focus { color: #B20050; }
.focus2 {
color: #222; border: solid 1px #c8c8c8;
display: inline-block;
padding: 2px 10px; margin: 0 4px;
border-radius: 4px;
background: #fff;
}
.link{ font-size: 20px; color: #B20050;}
.ui-infobar{ max-width:95%; }
.markdown-body{ max-width:95%; }
</style>
<!-- ## 標題
:::warning
簡介
:::

.a{
    text-align: center;
}

<a>123</a>