We have 469 guests and no members online



To create a button, use the [button] shortcode and customize it using the various parameters available

Style Defines the button style or class simple, default, primary, line, success, danger, link
href url link of the button n/a
Target specifies where to open the linked document _blank, _self, _parent, _top


Simple link


[button style="simple" href="#" target="blank"]title[/button]
[button_input style="default" href="#" target="blank"]title[/button_input]

Button variations

Simple Default Primary Success Danger link


[button style="simple" href="#" target="_self"]simple[/button]
[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="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 style="color" href="#" target="self"]small[/button]
   [button style="color" href="#" target="self"]medium[/button]
   [button style="color" href="#" target="self"]large[/button]

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.


[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]