UNITS

🇯🇵 Document Snippets Themes GitHub Twitter

Button

You can create a buttons by specifying the uc-btn class.

1. Basic

Create a basic button.

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. Color variations

There are abundant color variations.

 
 
 
 
 
 
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. Fit to width

By specifying the _full class, you can display the button in the full width of the screen.

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