Different Sizes
Large button Default button Small button Mini button
Get the code
[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=”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=”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
Get the code
[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
Get the code
[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 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
Get the code
[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 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