Buttons | Santander Pinturas y Lacados

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

Argument	Default	Description
link (required)	None	The full URL of where you want the button to link. Ex: http://yourwebsite.com/example/
color	default	Color of the button (view colors).
target	_self	How the button linksto its URL – _self, _blank, or lightbox.
size	default	Size of button (view sizes) – mini, small, default, large.
class	None	desc
title	None	Title tag of link, for you SEO folks. If left blank, it will default to the text of the button.
icon_before	None	Icon before text of button to popup (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with `fa-`.
icon_after	None	Icon after text of button to popup (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with `fa-`.
block	false	Whether to display button as block-level element – true or false.

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
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 FontAwesome, 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.

Note: When referencing a FontAwesome icon ID, do not prefix it with fa-.

Mini Button

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

Small Button

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

Normal Button

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

Large Button

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