2. Buttons - kyle-jennings/franklin GitHub Wiki

Use buttons to signal actions. Buttons also come in many different colors, use the "color" attribute in the shortcode to set the desired color.

Buttons can also be grouped together by wrapping them in [buttongroup] shortcode tags.

Example buttons

Primary

[button color="primary" text="Click Here" target="http://google.com"]

[buttongroup] [button color="primary" text="Button 1" target="http://google.com"][button color="primary" text="Button 2" state="hover" target="http://google.com"][button color="primary" text="Button 3" state="active" target="http://google.com"] [/buttongroup]

Primary Alt

[button color="primary-alt" text="Click Here" target="http://google.com"]

[buttongroup] [button color="primary-alt" text="Button 1" target="http://google.com"][button color="primary-alt" text="Button 2" state="hover" target="http://google.com"][button color="primary-alt" text="Button 3" state="active" target="http://google.com"] [/buttongroup]

Secondary

[button color="secondary" text="Click Here" target="http://google.com"]

[buttongroup] [button color="secondary" text="Button 1" target="http://google.com"][button color="secondary" text="Button 2" state="hover" target="http://google.com"][button color="secondary" text="Button 3" state="active" target="http://google.com"] [/buttongroup]

Gray

[button color="gray" text="Click Here" target="http://google.com"]

[buttongroup] [button color="gray" text="Button 1" target="http://google.com"][button color="gray" text="Button 2" state="hover" target="http://google.com"][button color="gray" text="Button 3" state="active" target="http://google.com"] [/buttongroup]

Outline

[button color="outline" text="Click Here" target="http://google.com"]

[buttongroup] [button color="outline" text="Button 1" target="http://google.com"][button color="outline" text="Button 2" state="hover" target="http://google.com"][button color="outline" text="Button 3" state="active" target="http://google.com"] [/buttongroup]

Outline Inverse

[button color="outline-inverse" text="Click Here" target="http://google.com"]

[buttongroup class="dark"] [button color="outline-inverse" text="Button 1" target="http://google.com"][button color="outline-inverse" text="Button 2" state="hover" target="http://google.com"][button color="outline-inverse" text="Button 3" state="active" target="http://google.com"] [/buttongroup]