Easily create nicely looking buttons, which come in different styles.
To apply this component, add the
.uk-button class to an
<button> element. Now you have created a button. Add the
disabled attribute to a
<button> element to disable the button.
<a class="uk-button" href="/">...</a> <button class="uk-button" type="button">...</button> <button class="uk-button" type="button" disabled>...</button>
NOTE If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports. Just add the
data-uk-margin attribute from the Utility component to their parent element.
There are several color modifiers available. Just add one of the following classes to apply a different look.
||Emphasizes to identify the primary action in a set of buttons.|
||Indicates a successful or positive action.|
||Indicates a dangerous or negative action.|
||Deemphasizes to look like a link while maintaining button behavior.|
.uk-button-large class to a button to make it smaller or larger.
Full width button
.uk-width-1-1 class from the Grid component and the button will take up full width.
<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button> <button class="uk-button uk-width-1-1">...</button>