We’ve incorporated all of the main bootstrap colors including many other theme colors. Buttons also come in different sizes and can include icons.
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). |
| size | default | Size of button (view sizes) - xs, sm, md, lg, xlg, xxlg, xxxlg |
| shape | rounded | Shape of the button (view shapes) - rounded, square, pill, or 3d |
| link | The full URL where this button is linking to. | |
| target | _self | How the button links to its URL - _self, _blank, or lightbox. |
| label | The label text used within the button. | |
| 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. |
| class | None | desc |
Button Colors
In streamlining everything with Bootstrap, below you can see what we've come up with for colors. The first six 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.
To make any button into a "ghost button", simply add "ghost" as a classname to the button.
| Color ID | Usage | Normal | Ghost |
|---|---|---|---|
| default | [button link="#"]Default[/button] | Default | Default |
| primary | [button link="#" color="primary"]Primary[/button] | Primary | Primary |
| info | [button link="#" color="info"]Info[/button] | Info | Info |
| success | [button link="#" color="success"]Success[/button] | Success | Success |
| warning | [button link="#" color="warning"]Warning[/button] | Warning | Warning |
| danger | [button link="#" color="danger"]Danger[/button] | Danger | Danger |
| black | [button link="#" color="black"]Black[/button] | Black | Black |
| blue | [button link="#" color="blue"]Blue[/button] | Blue | Blue |
| brown | [button link="#" color="brown"]Brown[/button] | Brown | Brown |
| dark_blue | [button link="#" color="dark_blue"]Dark Blue[/button] | Dark Blue | Dark Blue |
| dark_brown | [button link="#" color="dark_brown"]Dark Brown[/button] | Dark Brown | Dark Brown |
| dark_green | [button link="#" color="dark_green"]Dark Green[/button] | Dark Green | Dark Green |
| green | [button link="#" color="green"]Green[/button] | Green | Green |
| mauve | [button link="#" color="mauve"]Mauve[/button] | Mauve | Mauve |
| orange | [button link="#" color="orange"]Orange[/button] | Orange | Orange |
| pearl | [button link="#" color="pearl"]Pearl[/button] | Pearl | Pearl |
| pink | [button link="#" color="pink"]Pink[/button] | Pink | Pink |
| purple | [button link="#" color="purple"]Purple[/button] | Purple | Purple |
| red | [button link="#" color="red"]red[/button] | Red | Red |
| slate_grey | [button link="#" color="slate_grey"]Slate Grey[/button] | Slate Grey | Slate Grey |
| silver | [button link="#" color="silver"]Silver[/button] | Silver | Silver |
| steel_blue | [button link="#" color="steel_blue"]Steel Blue[/button] | Steel Blue | Steel Blue |
| teal | [button link="#" color="teal"]Teal[/button] | Teal | Teal |
| yellow | [button link="#" color="yellow"]Yellow[/button] | Yellow | Yellow |
| wheat | [button link="#" color="wheat"]Wheat[/button] | Wheat | Wheat |
| White | [button link="#" color="white"]White[/button] | White | White |
Button Sizes
When, using the "size" parameter you can use the following sizes.
| Size | Usage | Example |
|---|---|---|
| mini | [button link="#" size="xs"]Mini[/button] | Mini |
| small | [button link="#" size="sm"]Small[/button] | Small |
| default | [button link="#"]Default[/button] | Default |
| large | [button link="#" size="lg"]Large[/button] | Large |
| X-large | [button link="#" size="xlg"]X-Large[/button] | X-Large |
| XX-large | [button link="#" size="xxlg"]XX-Large[/button] | XX-Large |
| XXX-large | [button link="#" size="xxxlg"]XXX-Large[/button] | XXX-Large |
Button Shapes
When, using the "shape" parameter you can use the following shapes.
| Shape | Usage | Example |
|---|---|---|
| Rounded | [button link="#" shape="rounded"]Rounded[/button] | Rounded Btn |
| Square | [button link="#" shape="square"]Square[/button] | Square Btn |
| Pill | [button link="#" shape="pill"]Square[/button] | Pill Btn |
| 3D | [button link="#" shape="3d"]3D[/button] | 3D Btn |
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-.
[button link="#" size="xs" icon_after="arrow-circle-right"]Mini Button[/button]Small Button
[button link="#" size="sm" 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="lg" icon_after="arrow-circle-right"]Large Button[/button]X-Large Button
[button link="#" size="xlg" icon_after="arrow-circle-right"]X-Large Button[/button]XX-Large Button
[button link="#" size="xxlg" icon_after="arrow-circle-right"]XX-Large Button[/button]XXX-Large Button
[button link="#" size="xxxlg" icon_after="arrow-circle-right"]XXX-Large Button[/button]