Shortcodes: Buttons
Shortcodes is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.
Buttons Options:
Use any of the available button classes to quickly create a styled link/button.
default primary success info warning danger link
pink teal purple orange brown black
[button target="_self" style="" class="btn-pink" disabled="active" size="default" link="#"]pink[/button] [button target="_self" style="" class="btn-teal" disabled="active" size="default" link="#"]teal[/button] [button target="_self" style="" class="btn-purple" disabled="active" size="default" link="#"]purple[/button] [button target="_self" style="" class="btn-orange" disabled="active" size="default" link="#"]orange[/button] [button target="_self" style="" class="btn-brown" disabled="active" size="default" link="#"]brown[/button] [button target="_self" style="" class="btn-black" disabled="active" size="default" link="#"]black[/button]
Disabled Buttons
Add the disabled
attribute to buttons to make them look unclickable (fading them back 50%)
default primary success info warning danger link
pink teal purple orange brown black
[button target="_self" style="" class="btn-pink" disabled="disabled" size="default" link="#"]pink[/button] [button target="_self" style="" class="btn-teal" disabled="disabled" size="default" link="#"]teal[/button] [button target="_self" style="" class="btn-purple" disabled="disabled" size="default" link="#"]purple[/button] [button target="_self" style="" class="btn-orange" disabled="disabled" size="default" link="#"]orange[/button] [button target="_self" style="" class="btn-brown" disabled="disabled" size="default" link="#"]brown[/button] [button target="_self" style="" class="btn-black" disabled="disabled" size="default" link="#"]black[/button]
Buttons Size
Fancy larger or smaller buttons? Add .btn-lg
, .btn-sm
, or .btn-xs
for additional sizes.
[button target="_self" style="" class="btn-default" disabled="active" size="large" link="#"]large size[/button] [button target="_self" style="" class="btn-primary" disabled="active" size="large" link="#"]large size[/button] [button target="_self" style="" class="btn-default" disabled="active" size="default" link="#"]default size[/button] [button target="_self" style="" class="btn-primary" disabled="active" size="default" link="#"]default size[/button] [button target="_self" style="" class="btn-default" disabled="active" size="small" link="#"]small size[/button] [button target="_self" style="" class="btn-primary" disabled="active" size="small" link="#"]small size[/button] [button target="_self" style="" class="btn-default" disabled="active" size="extra" link="#"]extra small[/button] [button target="_self" style="" class="btn-primary" disabled="active" size="extra" link="#"]extra small[/button]
Custom Colored Buttons
[button target="_self" style="background-color:#739620;color:#ffffff;border:1px solid #4f6a10;" class="" disabled="active" size="default" link="#"]#739620[/button] [button target="_self" style="background-color:#a54719;color:#ffffff;border:1px solid #884e31;" class="" disabled="active" size="default" link="#"]#a54719[/button] [button target="_self" style="background-color:#5ca794;color:#ffffff;border:1px solid #64817a;" class="" disabled="active" size="default" link="#"]#5ca794[/button]
Custom List Styles:
Arrows
- List item 1
- List item 2
- List item 3
Checklist
- List item 1
- List item 2
- List item 3
Remove
- List item 1
- List item 2
- List item 3
Links
- List item 1
- List item 2
- List item 3
Chevron
- List item 1
- List item 2
- List item 3
Thumbs up
- List item 1
- List item 2
- List item 3
Music
- List item 1
- List item 2
- List item 3
Questions
- List item 1
- List item 2
- List item 3
Download
- List item 1
- List item 2
- List item 3
Text Files
- List item 1
- List item 2
- List item 3
Hand Right
- List item 1
- List item 2
- List item 3
Ok list
- List item 1
- List item 2
- List item 3