Buttons | Outright Consultoría

General Usage

Usage Examples

Button Text

[button link="http://google.com"]Button Text[/button]

Button Text

[button link="http://google.com" color="success"]Button Text[/button]

Follow Me

[button link="http://google.com" color="primary" icon_before="twitter"]Follow Me[/button]

Options

Required arguments
 - link: The full URL of where you want the button to link

Optional arguments
 - color: view colors
 - target: _self, _blank, or lightbox
 - size: mini, small, default, large (view sizes)
 - class: Any CSS classes you want to add
 - title: Title of link, will default to button's text
 - icon_before: Optional icon before text (view icons)
 - icon_after: Optional icon after text (view icons)

Button Colors

In streamlining everything with Bootstrap, below you can see what we’ve come up with for colors.

The first seven colors are the actual standard button classes that come with Bootstrap. In frontend developement, it’s generally considered a best practice to name classes based on their actions opposed to their specific color or design. This is why you’ll see color ID’s you can use in the shortcode like “primary” and “info” for example.

Then, in extending this functionality further for WordPress users, we’ve also added many more colors to the system that can be referenced by their actual color name, as you’d recognize it. Additionally, keeping our Theme Blvd added color classes named this way allows buyers upgrading from prior versions of the framework to maintain what they’ve already setup.

Color ID	Usage	Example
default	`[button link="#"]Default[/button]`	Default
primary	`[button link="#" color="primary"]Primary[/button]`	Primary
info	`[button link="#" color="info"]Info[/button]`	Info
success	`[button link="#" color="success"]Success[/button]`	Success
warning	`[button link="#" color="warning"]Warning[/button]`	Warning
danger	`[button link="#" color="danger"]Danger[/button]`	Danger
inverse	`[button link="#" color="inverse"]Inverse[/button]`	Inverse
black	`[button link="#" color="black"]Black[/button]`	Black
blue	`[button link="#" color="blue"]Blue[/button]`	Blue
brown	`[button link="#" color="brown"]Brown[/button]`	Brown
dark_blue	`[button link="#" color="dark_blue"]Dark Blue[/button]`	Dark Blue
dark_brown	`[button link="#" color="dark_brown"]Dark Brown[/button]`	Dark Brown
dark_green	`[button link="#" color="dark_green"]Dark Green[/button]`	Dark Green
green	`[button link="#" color="green"]Green[/button]`	Green
mauve	`[button link="#" color="mauve"]Mauve[/button]`	Mauve
orange	`[button link="#" color="orange"]Orange[/button]`	Orange
pearl	`[button link="#" color="pearl"]Pearl[/button]`	Pearl
pink	`[button link="#" color="pink"]Pink[/button]`	Pink
purple	`[button link="#" color="purple"]Purple[/button]`	Purple
red	`[button link="#" color="red"]red[/button]`	Red
slate_grey	`[button link="#" color="slate_grey"]Slate Grey[/button]`	Slate Grey
silver	`[button link="#" color="silver"]Silver[/button]`	Silver
steel_blue	`[button link="#" color="steel_blue"]Steel Blue[/button]`	Steel Blue
teal	`[button link="#" color="teal"]Teal[/button]`	Teal
yellow	`[button link="#" color="yellow"]Yellow[/button]`	Yellow
wheat	`[button link="#" color="wheat"]Wheat[/button]`	Wheat

Button Sizes

When, using the “size” parameter you can use the following sizes.

Size	Usage	Example
mini	`[button link="#" size="mini"]Mini[/button]`	Mini
small	`[button link="#" size="small"]Small[/button]`	Small
default	`[button link="#"]Default[/button]`	Default
large	`[button link="#" size="large"]Large[/button]`	Large

Button Icons

Because of the awesomeness added by FontAwesomene, you can easily add and any of the supported vector icons. To do this, you simply use the icon_before or icon_after parameters (or both) and insert the ID of the icon you want to use.

Mini Button

[button link="#" size="mini" icon_after="circle-arrow-right"]Mini Button[/button]

Small Button

[button link="#" size="small" icon_after="circle-arrow-right"]Small Button[/button]

Normal Button

[button link="#" icon_after="circle-arrow-right"]Normal Button[/button]

Large Button

[button link="#" size="large" icon_after="circle-arrow-right"]Large Button[/button]