Buttons

Explanation

1. To create a button simply add the class .uk-button to your element

   <a class="uk-button" href="">Button 1</a>
   <button class="uk-button">Button 2</button>

   BUTTON 1 BUTTON 2
   
   

2. To set the color simply add one of the following classes

   CLASS	DESCRIPTION
   .uk-button-default	To apply the White color to the button
   .uk-button-primary	To apply the Blue color to the button
   .uk-button-secondary	To apply the Black color to the button
   .uk-button-warning	To apply the Orange color to the button
   .uk-button-success	To apply the Green color to the button
   .uk-button-danger	To apply the Red color to the button

   <button class="uk-button uk-button-default">White</button>
   <button class="uk-button uk-button-primary">Blue</button>
   <button class="uk-button uk-button-secondary">Black</button>
   <button class="uk-button uk-button-warning">Orange</button>
   <button class="uk-button uk-button-success">Green</button>
   <button class="uk-button uk-button-danger">Red</button>

   WHITE   BLUE   BLACK   ORANGE   GREEN   RED
   
   

3. Size of buttons is normal by default. To change it simply add one of the following classes

   CLASS	DESCRIPTION
   .uk-button-small	To apply the Small size to the button
   .uk-button-large	To apply the Large size to the button

   <button class="uk-button uk-button-warning uk-button-small">Small</button>
   <button class="uk-button uk-button-secondary">Normal</button>
   <button class="uk-button uk-button-primary uk-button-large">Large</button>

   SMALL     NORMAL   LARGE  
   
   

4. Buttons with some icons

   <button class="uk-button uk-button-success"><span data-uk-icon="list"></span>Button With Icon</button>
   <button class="uk-button uk-button-danger"><span data-uk-icon="trash"></span>Delete</button>
   <button class="uk-button uk-button-default"><span data-uk-icon="cog"></span>Settings</button>

   BUTTON WITH ICON     DELETE   SETTINGS