UNITS

🇺🇸 Document Snippets Themes GitHub Twitter

ボタン

uc-btn クラスを指定することで、ボタンを作成することができます。

1. 基本

基本となるボタンを作成します。

Button
<div class="uc-btn"><a href="#">Button</a></div>
<button class="uc-btn"><span>Button</span></button>
<!-- It can be used in `a` tag. -->
<div class="uc-btn"><span>Button</span></div>

2. カラーバリエーション

状況に応じて使い分けることができるよう、豊富なバリエーションを用意しています。

 
 
 
 
 
 
Disabled
 
<div class="uc-btn _ghost"><a href="#">Ghost</a></div>
<div class="uc-btn _primary"><a href="#">Primary</a></div>
<div class="uc-btn _secondary"><a href="">Secondary</a></div>
<div class="uc-btn _success"><a href="">Success</a></div>
<div class="uc-btn _danger"><a href="">Danger</a></div>
<div class="uc-btn _warning"><a href="">Warning</a></div>
<div class="uc-btn _disabled"><span>Disabled</span></div>

3. ボタンの横幅を最大化

_full クラスを指定することで、ボタンの横幅を最大値に指定することができます。

<div class="uc-btn _full"><a href="#">Button</a></div>