Buttons

Different Sizes

Large button Default button Small button Mini button

Get the code

[button size=”large” url=”#”]Large button[/button]
[button url=”#”]Default button[/button]
[button size=”small” url=”#”]Small button[/button]
[button size=”mini” url=”#”]Mini button[/button]

Different Colors

Button Button Button Button Button Button Button Button Button

Large button Default button Small button Mini button

Large button Default button Small button Mini button

Large button Default button Small button Mini button

Get the code

[button bg_color=”gray” url=”#”]Button[/button]
[button bg_color=”black” url=”#”]Button[/button]
[button bg_color=”red” url=”#”]Button[/button]
[button bg_color=”orange” url=”#”]Button[/button]
[button bg_color=”yellow” url=”#”]Button[/button]
[button bg_color=”green” url=”#”]Button[/button]
[button bg_color=”blue” url=”#”]Button[/button]
[button bg_color=”violet” url=”#”]Button[/button]
[button bg_color=”pink” url=”#”]Button[/button]

[button size=”large” bg_color=”yellow” url=”#”]Large button[/button]
[button bg_color=”yellow” url=”#”]Default button[/button]
[button size=”small” bg_color=”yellow” url=”#”]Small button[/button]
[button size=”mini” bg_color=”yellow” url=”#”]Mini button[/button]

[button size=”large” bg_color=”green” url=”#”]Large button[/button]
[button bg_color=”green” url=”#”]Default button[/button]
[button size=”small” bg_color=”green” url=”#”]Small button[/button]
[button size=”mini” bg_color=”green” url=”#”]Mini button[/button]

[button size=”large” bg_color=”blue” url=”#”]Large button[/button]
[button bg_color=”blue” url=”#”]Default button[/button]
[button size=”small” bg_color=”blue” url=”#”]Small button[/button]
[button size=”mini” bg_color=”blue” url=”#”]Mini button[/button]

With icons (included icons pack)

Left icons Left icons Left icons Left icons Left icons

Right icons Right icons Right icons Right icons Right icons

Get the code

[button bg_color=”red” url=”#”][icon style=”white”]icon-heart[/icon][/button]
[button bg_color=”orange” url=”#”][icon style=”white”]icon-signal[/icon][/button]
[button bg_color=”yellow” url=”#”][icon style=”white”]icon-repeat[/icon][/button]
[button bg_color=”green” url=”#”][icon style=”white”]icon-ok-circle[/icon][/button]
[button bg_color=”blue” url=”#”][icon style=”white”]icon-download[/icon][/button]

[button bg_color=”red” url=”#”][icon style=”white”]icon-heart[/icon]Left icons[/button]
[button bg_color=”orange” url=”#”][icon style=”white”]icon-signal[/icon]Left icons[/button]
[button bg_color=”yellow” url=”#”][icon style=”white”]icon-repeat[/icon]Left icons[/button]
[button bg_color=”green” url=”#”][icon style=”white”]icon-ok-circle[/icon]Left icons[/button]
[button bg_color=”blue” url=”#”][icon style=”white”]icon-download[/icon]Left icons[/button]

[button bg_color=”red” url=”#”]Right icons[icon style=”white”]icon-heart[/icon][/button]
[button bg_color=”orange” url=”#”]Right icons[icon style=”white”]icon-signal[/icon][/button]
[button bg_color=”yellow” url=”#”]Right icons[icon style=”white”]icon-repeat[/icon][/button]
[button bg_color=”green” url=”#”]Right icons[icon style=”white”]icon-ok-circle[/icon][/button]
[button bg_color=”blue” url=”#”]Right icons[icon style=”white”]icon-download[/icon][/button]

Buttons with icons from URL

Button Button

Get the code

[button bg_color=”violet” url=”#”]<img src=”path to icon” alt=”” />[/button]
[button bg_color=”green” url=”#”]<img src=”path to icon” alt=”” />Left icons[/button]
[button bg_color=”blue” url=”#”]Left icons<img src=”path to icon” alt=”” />[/button]

Buttons with specific target

Blank Self Parent Top

Get the code

[button bg_color=”blue” target=”_blank” url=”#”]Blank[/button]
[button bg_color=”orange” target=”_self” url=”#”]Self[/button]
[button bg_color=”yellow” target=”_parent” url=”#”]Parent[/button]
[button bg_color=”green” target=”_top” url=”#”]Top[/button]

Custom colors + text colors

Large button Default button Small button Mini button

Get the code

[button size=”large” bg_color=”#6d8764″ text_color=”#2e3c2a” url=”#”]Large button[/button]
[button bg_color=”#a20025″ text_color=”#E9F2F2″ url=”#”]Default button[/button]
[button size=”small” bg_color=”#f0a30a” text_color=”#724e06″ url=”#”]Small button[/button]
[button size=”mini” bg_color=”#00aba9″ text_color=”#2E3D27″ url=”#”]Mini button[/button]

Custom width

Full width button
400px width button

30% width button

Get the code

[button bg_color=”red” width=”full” url=”#”]Full width button[/button]
[button bg_color=”green” width=”400px” url=”#”]400px width button[/button]
[button bg_color=”blue” width=”30%” url=”#”]30% width button[/button]

Disable buttons

Disable button Disable button Disable button Disable button

Get the code

[button size=”large” bg_color=”red” disable=”yes” url=”#”]Disable button[/button]
[button bg_color=”violet” disable=”yes” url=”#”]Disable button[/button]
[button size=”small” bg_color=”green” disable=”yes” url=”#”]Disable button[/button]
[button size=”mini” bg_color=”gray” disable=”yes” url=”#”]Disable button[/button]

Customization options

Parameter Description
label the text from the button
bg_color use color profile OR custom #color
text_color use color profile OR custom #color
size large, empty [default], small, mini
width full (full width) OR value ( 400px / 30% ) [deafult is auto]
disable if not empty, the button is rendered disabled
url the url for the link
target _blank, _self, _parent, _top

Color profiles

gray black lime green emerald teal cyan cobalt blue indigo violet pink magenta crimson red orange amber yellow brown olive steel mauve taupe