Buttons & Lists

Shortcodes is a HTML-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.

[title type=”h2″ class=””]Buttons Options:[/title]

Use any of the available button classes to quickly create a styled link/button.

[raw]

[button size=”” link=”#1″ bgcolor=”” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Default[/button]
[button size=”” link=”#2″ bgcolor=”” textcolor=”#fff” class=”btn-shadow” target=”_self” enabled=”true”]Shadow[/button]
[button size=”” link=”#3″ bgcolor=”” textcolor=”#69616c” class=”btn-transparent” target=”_self” enabled=”true”]Transparent[/button]
[button size=”” link=”#4″ bgcolor=”” textcolor=”#fff” class=”btn-arrow” target=”_self” enabled=”true”]Arrowed[/button]

[/raw]

[code]
[button size=”” link=”#1″ textcolor=”#fff” class=”” target=”_self” enabled=”true”]Default[/button]
[button size=”” link=”#2″ textcolor=”#fff” class=”btn-shadow” target=”_self” enabled=”true”]Shadow[/button]
[button size=”” link=”#3″ textcolor=”#fff” class=”btn-transparent” target=”_self” enabled=”true”]Transparent[/button]
[button size=”” link=”#4″ textcolor=”#69616c” class=”btn-arrow” target=”_self” enabled=”true”]Arrowed[/button]
[/code]

[title type=”h3″ class=””]Disabled Buttons[/title]

Add the disabled attribute to buttons to make them look unclickable (fading them back 50%)

[raw]

[button size=”” link=”#1″ bgcolor=”” textcolor=”#fff” class=”” target=”_self” enabled=”false”]Default[/button]
[button size=”” link=”#2″ bgcolor=”” textcolor=”#fff” class=”btn-shadow” target=”_self” enabled=”false”]Shadow[/button]
[button size=”” link=”#3″ bgcolor=”” textcolor=”#69616c” class=”btn-transparent” target=”_self” enabled=”false”]Transparent[/button]
[button size=”” link=”#4″ bgcolor=”” textcolor=”#fff” class=”btn-arrow” target=”_self” enabled=”false”]Arrowed[/button]

[/raw]

[code]
[button size=”” link=”#1″ textcolor=”#fff” class=”” target=”_self” enabled=”false”]Default[/button]
[button size=”” link=”#2″ textcolor=”#fff” class=”btn-shadow” target=”_self” enabled=”false”]Shadow[/button]
[button size=”” link=”#3″ textcolor=”#69616c” class=”btn-transparent” target=”_self” enabled=”false”]Transparent[/button]
[button size=”” link=”#4″ textcolor=”#fff” class=”btn-arrow” target=”_self” enabled=”false”]Arrowed[/button]
[/code]

[title type=”h3″ class=””]Buttons Size[/title]

Fancy larger or smaller buttons? Use additional sizes.

[raw]

[button size=”btn-small” link=”#” bgcolor=”” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Small[/button]
[button size=”btn-middle” link=”#” bgcolor=”” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Middle[/button]
[button size=”” link=”#” bgcolor=”” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Default[/button]
[button size=”btn-big” link=”#” bgcolor=”” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Large[/button]

[/raw]

[code]
[button size=”btn-small” link=”#” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Small[/button]
[button size=”btn-middle” link=”#” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Middle[/button]
[button size=”” link=”#” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Default[/button]
[button size=”btn-big” link=”#” textcolor=”#fff” class=”” target=”_self” enabled=”true”]Large[/button]
[/code]

[title type=”h2″ class=””]Custom Colored Buttons[/title]
[raw]
[button size=”” link=”#” bgcolor=”#72a5e6″ textcolor=”#fff” class=”” target=”_self” enabled=”true”]#72a5e6[/button]
[button size=”” link=”#” bgcolor=”#e36554″ textcolor=”#fff” class=”” target=”_self” enabled=”true”]#e36554[/button]
[button size=”” link=”#” bgcolor=”#6ccad5″ textcolor=”#fff” class=”” target=”_self” enabled=”true”]#6ccad5[/button]
[button size=”” link=”#” bgcolor=”#c59140″ textcolor=”#fff” class=”” target=”_self” enabled=”true”]#c59140[/button]
[/raw]

[code]
[button link=”#” bgcolor=”#72a5e6″ textcolor=”#fff” target=”_self” enabled=”true”]#72a5e6[/button]
[button link=”#” bgcolor=”#e36554″ textcolor=”#fff” target=”_self” enabled=”true”]#e36554[/button]
[button link=”#” bgcolor=”#6ccad5″ textcolor=”#fff” target=”_self” enabled=”true”]#6ccad5[/button]
[button link=”#” bgcolor=”#c59140″ textcolor=”#fff” target=”_self” enabled=”true”]#c59140[/button]
[/code]

[title type=”h2″ class=””]Custom List Styles:[/title]
[row class=””]
[col type=”4″ class=””]
[title type=”h5″ class=””]Arrows[/title]
[list type=”list-caret-right” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Checklist[/title]
[list type=”list-check” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Remove[/title]
[list type=”list-remove” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Links[/title]
[list type=”list-external-link” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Chevron[/title]
[list type=”list-chevron-sign-right” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Thumbs up[/title]
[list type=”list-thumbs-up” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Music[/title]
[list type=”list-music” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Questions[/title]
[list type=”list-question-sign” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Download[/title]
[list type=”list-download” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Text Files[/title]
[list type=”list-file-text-alt” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]Hand Right[/title]
[list type=”list-hand-right” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]

[col type=”4″ class=””]
[title type=”h5″ class=””]OK list[/title]
[list type=”list-ok” class=””]

  • List item 1
  • List item 2
  • List item 3

[/list]
[/col]
[/row]