Elements

If you can dream it, you can do it

Buttons

To create a button, use the uk-button class. You can also use the following classes to add color or style the button as a link: uk-button-simple, uk-button-default, uk-button-primary, uk-button-line, uk-button-success, uk-button-danger, uk-button-link


Examples

Default link

markup
<a class="uk-button-simple uk-button" href="" target="_self">Simple link</a>
<button class="uk-button-default uk-button" href="" target="_self">input button</button>

Button variations

Default Primary Success Danger Simple link

markup
<a class="uk-button-simple uk-button" href="" target="_self">Simple</a>
<a class="uk-button-default uk-button" href="" target="_self">Default</a>
<a class="uk-button-primary uk-button" href="" target="_self">Primary</a>
<a class="uk-button-success uk-button" href="" target="_self">Success</a>
<a class="uk-button-danger uk-button" href="" target="_self">Danger</a>
<a class="uk-button-link uk-button" href="" target="_self">link</a>

Button sizes

You can add different size classes to your button to create button size variation using the size classes uk-button-mini, uk-button=small or uk-button-large

mini button small button default button Large button

markup
<a class="uk-button-color uk-button-mini uk-button" href="" target="_self">mini button</a>
<a class="uk-button-color uk-button-small uk-button" href="" target="_self">small button</a>
<a class="uk-button-color uk-button" href="" target="_self" size="">default button</a>
<a class="uk-button-color uk-button-large uk-button" href="" target="_self">Large button</a>

Button group

To create a button group, wrap the button_group class around the buttons that you'd like to be in the same group.





markup
<div class="uk-button-group">
  <a class="uk-button-color uk-button" href="" target="_self">small</a>
  <a class="uk-button-color uk-button" href="" target="_self">medium</a>
  <a class="uk-button-color uk-button" href="" target="_self">large</a>
</div>

Button with icons

To create a button with icon, add the uk-icon-{icon} class besides the text of the button. Click here to see a list of all icons


complete events list gallery Download

markup
<a class="uk-button-default uk-button" href="" target="_self"><i class="uk-icon-camera"></i> gallery</a>

Icon buttons

You can create icon buttons using the uk-icon-button class. These can come in handy especially when creating social icons.




markup
<a href="" class="uk-icon-button uk-icon-twitter" target="_self"></a>
<a href="" class="uk-icon-button uk-icon-dribbble" target="_self"></a>
<a href="" class="uk-icon-button uk-icon-facebook" target="_self"></a>
demo