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