wckd
THIS IS WCKD ™
   

Early Access

Buttons

Button Example

<button>Button</button>

Link Button Example

<a href="#" class="button">Link Button</a>
Link Button

Icon label Button Example

<a class="icon-label" href="#"><span class="wckd-icon">wckd</span> WCKD</a>
wckd WCKD

Button Demo

<ul class="no-bullets wckd-menu horizontal gap">
	<li><button class="large">Button <span class="wckd-icon">wckd</span></button></li>
	<li><button class="large outline">Button <span class="wckd-icon">wckd</span></button></li>
	<li class="large align-middle"><button class="text">Button <span class="wckd-icon">wckd</span></button></li>	
</ul>
<br><br>
<ul class="no-bullets wckd-menu horizontal gap">
	<li><button>Button <span class="wckd-icon">wckd</span></button></li>
	<li><button class="outline">Button <span class="wckd-icon">wckd</span></button></li>
	<li class="align-middle"><button class="text">Button <span class="wckd-icon">wckd</span></button></li>	
</ul>
<br><br>
<ul class="no-bullets wckd-menu horizontal gap">
	<li><button class="small">Button <span class="wckd-icon">wckd</span></button></li>
	<li><button class="outline small">Button <span class="wckd-icon">wckd</span></button></li>
	<li class="align-middle small"><button class="text">Button <span class="wckd-icon">wckd</span></button></li>	
</ul>
<br><br>
<ul class="no-bullets wckd-menu horizontal gap">
	<li><button class="icon-button"><span class="wckd-icon large">wckd</span></button></li>
	<li class="align-middle"><button class="icon-button"><span class="wckd-icon small">wckd</span></button></li>
	<li class="align-middle"><button class="icon-button"><span class="wckd-icon">wckd</span></button></li>
	<li><button class="icon-button outline"><span class="wckd-icon large">wckd</span></button></li>
	<li class="align-middle"><button class="icon-button outline"><span class="wckd-icon small">wckd</span></button></li>
	<li class="align-middle"><button class="icon-button outline"><span class="wckd-icon">wckd</span></button></li>
	<li><button class="icon-button text"><span class="wckd-icon large">wckd</span></button></li>
	<li class="align-middle"><button class="icon-button text"><span class="wckd-icon small">wckd</span></button></li>
	<li class="align-middle"><button class="icon-button text"><span class="wckd-icon">wckd</span></button></li>

</ul>






Buttons HTML Structure

  • section
    • [button, a.button][.outline, .text]
    • [a, button].icon-label
      • span.wckd-icon
    • [button, a.button].icon-button
      • span.wckd-icon

Buttons Options

small, medium, large

Updates