[heading size=”h2″ style=”uk-module-title”]Buttons[/heading]
To create a button, use the [button] shortcode and customize it using the various parameters available
| Parameter | Description | Parameters |
|---|---|---|
| Style | Defines the button style or class | default, line, primary, success, danger, link |
| href | url link of the button | n/a |
| Target | specifies where to open the linked document | _blank, _self, _parent, _top |
[line_break/] [heading size=”h3″ style=”uk-module-title”]Examples[/heading] [button style=”default” href=”#” target=”_self”]Default link[/button] [button_input style=”primary” href=”#” target=”_self”]input button[/button_input] [line_break/] [line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code] [button style=”default” href=”#” target=”blank”]button[/button] [button_input style=”primary” href=”#” target=”blank”]button[/button_input] [/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Button variations[/heading] [button style=”default” href=”#” target=”_self”]Default[/button] [button style=”primary” href=”#” target=”_self”]Primary[/button] [button style=”success” href=”#” target=”_self”]Success[/button] [button style=”danger” href=”#” target=”_self”]Danger[/button] [button style=”line” href=”#” target=”_self”]Line[/button] [button style=”link” href=”#” target=”_self”]link[/button] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code] [button style=”default” href=”#” target=”_self”]default[/button] [button style=”primary” href=”#” target=”_self”]primary[/button] [button style=”success” href=”#” target=”_self”]success[/button] [button style=”danger” href=”#” target=”_self”]danger[/button] [button style=”line” href=”#” target=”_self”]line[/button] [button style=”link” href=”#” target=”_self”]link[/button] [/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Button sizes[/heading]
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
[button style=”color uk-button-mini” href=”#” target=”_self”]mini button[/button] [button style=”color uk-button-small” href=”#” target=”_self”]small button[/button] [button style=”color” href=”#” target=”_self” size=””]default button[/button] [button style=”color uk-button-large” href=”#” target=”_self”]Large button[/button] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][button style=”color uk-button-mini” href=”#” target=”_self”]mini button[/button] [button style=”color uk-button-small” href=”#” target=”_self”]small button[/button] [button style=”color” href=”#” target=”_self”]default button[/button] [button style=”color uk-button-large” href=”#” target=”_self”]Large button[/button][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Button group[/heading]
To create a button group, wrap the [button_group] shortcode around the buttons that you’d like to be in the same group.
[button_group] [button style=”color” href=”#” target=”_self”]small[/button] [button style=”color” href=”#” target=”_self”]medium[/button] [button style=”color” href=”#” target=”_self”]large[/button] [/button_group] [line_break/][line_break/] [button_group] [button style=”color uk-button-small” href=”#” target=”_self”]bad[/button] [button style=”color uk-button-small” href=”#” target=”_self”]average[/button] [button style=”color uk-button-small” href=”#” target=”_self”]good[/button] [/button_group] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][button_group] [button style=”color” href=”#” target=”self”]small[/button] [button style=”color” href=”#” target=”self”]medium[/button] [button style=”color” href=”#” target=”self”]large[/button] [/button_group][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Button with icons[/heading]
To create a button with icon, add the [icon] shortcode besides the text of the button. Click here to see a list of all icons
[line_break/] [button style=”color” href=”#” target=”_self”]complete [icon style=”icon-check”/][/button] [button style=”success” href=”#” target=”_self”]events list [icon style=”icon-caret-down”/][/button] [button style=”default” href=”#” target=”_self”][icon style=”icon-camera”/] gallery[/button] [button style=”link” href=”#” target=”_self”]Download [icon style=”icon-cloud-download”/][/button] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][button style=”default” href=”#” target=”_self”]gallery [icon style=”icon-camera”/][/button][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Icon buttons[/heading]
You can create icon buttons using the [icon_button] shortcode. These can come in handy especially when creating social icons.
[line_break/] [icon_button icon=”icon-twitter” url=”#” target=”_self”][/icon_button] [icon_button icon=”icon-dribbble” url=”#” target=”_self”][/icon_button] [icon_button icon=”icon-facebook” url=”#” target=”_self”][/icon_button] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][icon_button icon=”icon-twitter” url=”#” target=”_self”][/icon_button] [icon_button icon=”icon-dribbble” url=”#” target=”_self”][/icon_button] [icon_button icon=”icon-facebook” url=”#” target=”_self”][/icon_button][/code]
