Select Page

Buttons

[columnContainer border=”yes”]

[column span=”span12″]

This page displays Button Shortcode examples. Button shortcodes accept the following parameters:

  • color – Available colors (blue, red, green, purple, orange, grey, brown, black, yellow, pink, teal)
  • textColor – Enter a hexadecimal value (ex. #FFFFFF)
  • type – Available types (small, medium, large)
  • url – Pass in a URL value (ex. “http://www.google.com”)
  • target – Choose whether a button opens in a new window or not (“_blank” or “_self”)

Note: parameters must be wrapped quotations.

[/column]

[/columnContainer]

[columnContainer]
[column span=”span12″]

Small Button

(hopeButton type=”small” color=”blue” textColor=”#FFFFFF” url=”http://www.google.com” target=”_blank”)Small Button(/hopeButton)

[hopeButton type=”small” color=”blue” textColor=”#FFFFFF” url=”http://www.google.com” target=”_blank”]Small Button[/hopeButton]

(hopeButton type=”small” color=”purple” textColor=”white”)Small Button(/hopeButton)

[hopeButton type=”small” color=”purple” textColor=”white”]Small Button[/hopeButton]

(hopeButton type=”small” color=”green” textColor=”black”)Small Button(/hopeButton)

[hopeButton type=”small” color=”green” textColor=”black”]Small Button[/hopeButton]

(hopeButton type=”small” color=”orange” textColor=”black”)Small Button(/hopeButton)

[hopeButton type=”small” color=”orange” textColor=”black”]Small Button[/hopeButton]

(hopeButton type=”small” color=”grey” textColor=”white”)Small Button(/hopeButton)

[hopeButton type=”small” color=”grey” textColor=”white”]Small Button[/hopeButton]

(hopeButton type=”small” color=”black” textColor=”white”)Small Button(/hopeButton)

[hopeButton type=”small” color=”black” textColor=”white”]Small Button[/hopeButton]

(hopeButton type=”small” color=”yellow” textColor=”black”)Small Button(/hopeButton)

[hopeButton type=”small” color=”yellow” textColor=”black”]Small Button[/hopeButton]

(hopeButton type=”small” color=”pink” textColor=”black”)Small Button(/hopeButton)

[hopeButton type=”small” color=”pink” textColor=”black”]Small Button[/hopeButton]

(hopeButton type=”small” color=”teal” textColor=”black”)Small Button(/hopeButton)

[hopeButton type=”small” color=”teal” textColor=”black”]Small Button[/hopeButton]

Medium Button

(hopeButton type=”medium” color=”red” textColor=”#FFFFFF” url=”http://www.google.com” target=”_blank”)Medium Button(/hopeButton)

[hopeButton type=”medium” color=”red” textColor=”#FFFFFF” url=”http://www.google.com” target=”_blank”]Medium Button[/hopeButton]

Large Button

(hopeButton type=”large” color=”purple” textColor=”#FFFFFF” url=”http://www.google.com” target=”_blank”)Large Button(/hopeButton)

[hopeButton type=”large” color=”purple” textColor=”#FFFFFF” url=”http://www.google.com” target=”_blank”]Large Button[/hopeButton]

[/column]
[/columnContainer]