We are Gravity. We are passionate about life. We love great work. read more

Shortcodes

Buttons

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

ParameterDescriptionParameters
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

Examples

Default link

markup
[button style="default" href="#" target="blank"]button[/button]
[button_input style="primary" href="#" target="blank"]button[/button_input]

Button variations

Default Primary Success Danger Line link

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

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

markup

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





markup

[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

markup

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




markup

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

Talk to us

085 888 5555