Button Shortcodes

Description

[hr]

Insert a standard HTML submit input or button. Buttons can also be created using links with anchor tags to direct users to other pages or sites.

[clear]
[clear]

Buttons

[one_third]
[button style=”small” onclick=”alert(‘A small standard button’);”]Small Default Button[/button] [clear]
[button style=”small white” onclick=”alert(‘A small white button’);”]Small White Button[/button] [clear]
[button style=”small gray” onclick=”alert(‘A small gray button’);”]Small Gray Button[/button] [clear]
[button style=”small black” onclick=”alert(‘A small black button’);”]Small Black Button[/button] [clear]
[button style=”small orange” onclick=”alert(‘An small orange button’);”]Small Orange Button[/button] [clear]
[button style=”small red” onclick=”alert(‘A small red button’);”]Small Red Button[/button] [clear]
[button style=”small blue” onclick=”alert(‘A small blue button’);”]Small Blue Button[/button] [clear]
[button style=”small green” onclick=”alert(‘A small green button’);”]Small Green Button[/button]
[/one_third] [one_third]
[button onclick=”alert(‘A standard button’);”]Default Button[/button] [clear]
[button style=”white” onclick=”alert(‘A white button’);”]White Button[/button] [clear]
[button style=”gray” onclick=”alert(‘A gray button’);”]Gray Button[/button] [clear]
[button style=”black” onclick=”alert(‘A black button’);”]Black Button[/button] [clear]
[button style=”orange” onclick=”alert(‘An orange button’);”]Orange Button[/button] [clear]
[button style=”red” onclick=”alert(‘A red button’);”]Red Button[/button] [clear]
[button style=”blue” onclick=”alert(‘A blue button’);”]Blue Button[/button] [clear]
[button style=”green” onclick=”alert(‘A green button’);”]Green Button[/button]
[/one_third] [one_third_last]
[button style=”large” onclick=”alert(‘A large default button’);”]Large Default Button[/button] [clear]
[button style=”large white” onclick=”alert(‘A large white button’);”]Large White Button[/button] [clear]
[button style=”large gray” onclick=”alert(‘A large gray button’);”]Large Gray Button[/button] [clear]
[button style=”large black” onclick=”alert(‘A large black button’);”]Large Black Button[/button] [clear]
[button style=”large orange” onclick=”alert(‘A large orange button’);”]Large Orange Button[/button] [clear]
[button style=”large red” onclick=”alert(‘A large red button’);”]Large Red Button[/button] [clear]
[button style=”large blue” onclick=”alert(‘A large blue button’);”]Large Blue Button[/button] [clear]
[button style=”large green” onclick=”alert(‘A large green button’);”]Large Green Button[/button] [clear]
[/one_third_last]

.demoBtn .btn {min-width: 138px;} .demoBtn .btn.large {min-width: 185px;}

[clear]

Impact Button

Impact buttons are specially designed to draw attention. They are large and use the heading font to set them apart from other buttons. Impact buttons are used in the “Call to Action” shortcode.

[button style=”impactBtn” onclick=”alert(‘An impact button’);”]Impact Button[/button]

[clear]
[clear]

[button style="impactBtn" onclick="alert('An impact button');"]Impact Button[/button]

[clear]
[clear]

Standard Button

[hr]

[code][button]Button Text[/button][/code]

[clear]

Parameters (Standard Button)

style
(string) (Optional) The button color and size, e.g. “white large”. This may contain any combination of size and color.

Size: small, medium (default), large
Color: dark, white, gray, orange, red, blue, green, black, impactBtn
title
(string) (Optional) Title attribute.
class
(string) (Optional) Class attribute.
id
(string) (Optional) ID attribute.
onclick
(string) (Optional) JavaScript onclick functionality.
name
(string) (Optional) Forms object name attribute.
value
(string) (Optional) Forms object value attribute.

[clear]
[clear]
[clear]

Link Button

[hr]

[code][button_link url=”http://www.mysite.com”]Button Text[/button_link][/code]

Parameters (Link Button)

url
(string) Link to follow when clicked.
target
(string) (Optional) Link target attribute: blank, parent, self, top.
style
(string) (Optional) The button color and size, e.g. “white large”. This may contain any combination of size and color.

Size: small, medium (default), large
Color: dark, white, gray, orange, red, blue, green, black
title
(string) (Optional) Title attribute.
class
(string) (Optional) Class attribute.
id
(string) (Optional) ID attribute.
onclick
(string) (Optional) JavaScript onclick functionality.

[clear]
[clear]