Home / Shortcodes / Buttons

Buttons

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]
[/raw]

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]
[/raw]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *