Buttons
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 color primary success danger link |
| href | url link of the button | n/a |
| Target | specifies where to open the linked document | _blank _self _parent _top |
Examples
Simple link[button style="default" href="#" target="blank"]title[/button] [button_input style="default" href="#" target="blank"]title[/button_input]
Button variations
Default Color Primary Success Danger link[button style="default" href="#" target="_self"]Default[/button] [button style="color" href="#" target="_self"]Color[/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="link" href="#" target="_self"]link[/button]
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
[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]
Button group
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]
Button with icons
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
complete events list gallery Download
[button style="default" href="#" target="_self"]gallery [icon style="icon-camera"/][/button]
Icon buttons
You can create icon buttons using the [icon_button] shortcode. These can come in handy especially when creating social icons. To make the icon button have the same color as colored button, add the uk-color class right after the icon
[icon_button icon="icon-twitter" url="#" target="_self"][/icon_button] [icon_button icon="icon-dribbble uk-color" url="#" target="_self"][/icon_button] [icon_button icon="icon-facebook" url="#" target="_self"][/icon_button]
