Insert a standard HTML submit input or button. Buttons can also be created using links with anchor tags to direct users to other pages or sites.
[hr]
[tabs]
[tab title=»Default Button»]
[clear]
This is the size and style of a default button. Below is the shortcode used to create this button.
[button onclick="alert('Clicked!');"]Default Button[/button]
[clear]
[button_link url="http://mysite.com"]Default Button[/button_link]
[/tab]
[tab title=»Small Button»]
[clear]
This is an example of a Small button. Small buttons are just like normal buttons only smaller.
[button style="small" onclick="alert('Clicked!');"]Small Button[/button]
[clear]
[button_link style="small" url="#"]Small Button[/button_link]
[/tab]
[tab title=»Large Button»]
[clear]
This is an example of a Large button. Again, just like normal buttons only this time, larger.
[button style="large" onclick="alert('Clicked!');"]Large Button[/button]
[clear]
[button_link style="large" url="#"]Large Button[/button_link]
[/tab]
[tab title=»Impact Button»]
[clear]
Impact buttons draw attention with large bold text to set them apart from other buttons.
[button style="impactBtn" onclick=""]Impact Button[/button]
[clear]
[button_link style="impactBtn" url="#"]Impact Button[/button_link]
[/tab]
[/tabs]
[clear]
[clear]
Custom Colors
Specify the button background and text colors using the background
and color
parameters.
[clear]
[button style=»» color=»#fff» background=»#FF0066″ onclick=»get_quote()»]#FF0066[/button]
[button style=»» color=»#333″ background=»#FBB829″ onclick=»get_quote()»]#FBB829[/button]
[button style=»» color=»#fff» background=»#1693A5″ onclick=»get_quote()»]#1693A5[/button]
[button style=»» color=»#fff» background=»#ED146F» onclick=»get_quote()»]#ED146F[/button]
[button style=»» color=»#fff» background=»#556270″ onclick=»get_quote()»]#556270[/button]
[button style=»» color=»#fff» background=»#515151″ onclick=»get_quote()»]#515151[/button]
[button style=»» color=»#fff» background=»#2A8FBD» onclick=»get_quote()»]#2A8FBD[/button]
[button style=»» color=»#fff» background=»#F02311″ onclick=»get_quote()»]#F02311[/button]
[button style=»» color=»#fff» background=»#333333″ onclick=»get_quote()»]#333333[/button]
[button style=»» color=»#333″ background=»#CCFF00″ onclick=»get_quote()»]#CCFF00[/button]
[button style=»» color=»#fff» background=»#FE4365″ onclick=»get_quote()»]#FE4365[/button]
[button style=»» color=»#fff» background=»#025D8C» onclick=»get_quote()»]#025D8C[/button]
[button style=»» color=»#fff» background=»#77CCA4″ onclick=»get_quote()»]#77CCA4[/button]
[button style=»» color=»#333″ background=»#D8D8C0″ onclick=»get_quote()»]#D8D8C0[/button]
[button style=»» color=»#333″ background=»#6CDFEA» onclick=»get_quote()»]#6CDFEA[/button]
[button style=»» color=»#fff» background=»#420943″ onclick=»get_quote()»]#420943[/button]
[button style=»» color=»#fff» background=»#FF6666″ onclick=»get_quote()»]#FF6666[/button]
[button style=»» color=»#333″ background=»#CCCCCC» onclick=»get_quote()»]#CCCCCC[/button]
[button style=»» color=»#333″ background=»#FFCC00″ onclick=»get_quote()»]#FFCC00[/button]
[button style=»» color=»#333″ background=»#C3FF68″ onclick=»get_quote()»]#C3FF68[/button]
[button style=»» color=»#fff» background=»#7F94B0″ onclick=»get_quote()»]#7F94B0[/button]
[button style=»» color=»#fff» background=»#948C75″ onclick=»get_quote()»]#948C75[/button]
[button style=»» color=»#333″ background=»#FFFF00″ onclick=»get_quote()»]#FFFF00[/button]
[button style=»» color=»#fff» background=»#D70044″ onclick=»get_quote()»]#D70044[/button]
[button style=»» color=»#fff» background=»#107FC9″ onclick=»get_quote()»]#107FC9[/button]
[button style=»» color=»#fff» background=»#34BEDA» onclick=»get_quote()»]#34BEDA[/button]
[button style=»» color=»#fff» background=»#FF8800″ onclick=»get_quote()»]#FF8800[/button]
[button style=»» color=»#333″ background=»#A7DBD8″ onclick=»get_quote()»]#A7DBD8[/button]
[button style=»» color=»#fff» background=»#67A6A6″ onclick=»get_quote()»]#67A6A6[/button]
[button style=»» color=»#fff» background=»#A40778″ onclick=»get_quote()»]#A40778[/button]
[button style=»» color=»#333″ background=»#01D2FF» onclick=»get_quote()»]#01D2FF[/button]
[button style=»» color=»#fff» background=»#FB174C» onclick=»get_quote()»]#FB174C[/button]
[button style=»» color=»#fff» background=»#369699″ onclick=»get_quote()»]#369699[/button]
[button style=»» color=»#fff» background=»#0B486B» onclick=»get_quote()»]#0B486B[/button]
[button style=»» color=»#fff» background=»#300018″ onclick=»get_quote()»]#300018[/button]
[button color="#fff" background="#1693A5"]Click me[/button]
[clear] [hr]
Buttons with Icons
Specify a theme icon to use on a button. Enter the name for your button icon using the icon
parameter.
[clear]
[button icon=»icon-refresh» color=»#fff» background=»#00A0B0″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-shopping-cart» color=»#fff» background=»#00A0B0″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-comment» color=»#fff» background=»#00A0B0 » onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-trash» color=»#fff» background=»#6A4A3C» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-cog» color=»#fff» background=»#6A4A3C» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-info-sign» color=»#fff» background=»#6A4A3C» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-user» color=»#fff» background=»#6A4A3C» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-home» color=»#fff» background=»#CC333F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-book» color=»#fff» background=»#CC333F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-map-marker» color=»#fff» background=»#CC333F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-cogs» color=»#fff» background=»#CC333F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-envelope» color=»#fff» background=»#EB6841″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-pencil» color=»#fff» background=»#EB6841″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-cloud» color=»#fff» background=»#EB6841″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-heart» color=»#fff» background=»#EB6841″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-camera» color=»#6E6A5E» background=»#EDC951″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-asterisk» color=»#6E6A5E» background=»#EDC951″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-beaker» color=»#6E6A5E» background=»#EDC951″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-bolt» color=»#6E6A5E» background=»#EDC951″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-bell» color=»#fff» background=»#8A9B0F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-flag» color=»#fff» background=»#8A9B0F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-eye-open» color=»#fff» background=»#8A9B0F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-lock» color=»#fff» background=»#8A9B0F» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-globe» color=»#fff» background=»#BD1550″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-star» color=»#fff» background=»#BD1550″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-remove» color=»#fff» background=»#BD1550″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-tag» color=»#fff» background=»#BD1550″ onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-wrench» color=»#fff» background=»#490A3D» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-warning-sign» color=»#fff» background=»#490A3D» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-file» color=»#fff» background=»#490A3D» onclick=»get_quote()»]Icon Buttons[/button]
[button icon=»icon-download-alt» color=»#fff» background=»#490A3D» onclick=»get_quote()»]Icon Buttons[/button]
[button icon="icon-ok"]Icon Button[/button]
[clear]
[clear] [hr]
Standard Button
[code][button]Button Text[/button][/code]
Parameters (Standard Button)
- style
- (string) (Optional) The button size or for impact buttons.
- Values: small, medium (default), large, impactBtn
- color
- (string) (Optional) The text color for the button. Any CSS color value can be used.
- background
- (string) (Optional) The background color for the button. Any CSS color value can be used.
- icon
- (string) (Optional) The class name of an optional icon. Any icon class listed in the icon shortcodes can be used.
- title
- (string) (Optional) Title attribute.
- class
- (string) (Optional) Class attribute.
- id
- (string) (Optional) ID attribute.
- onclick
- (string) (Optional) JavaScript onclick functionality.
- name
- (string) (Optional) Forms object name attribute.
- value
- (string) (Optional) Forms object value attribute.
[hr]
Link Button
[code][button_link url=»http://www.mysite.com»]Button Text[/button_link][/code]
Parameters (Link Button)
- url
- (string) Link to follow when clicked.
- target
- (string) (Optional) Link target attribute: blank, parent, self, top.
- style
- (string) (Optional) The button size or for impact buttons.
- Values: small, medium (default), large, impactBtn
- color
- (string) (Optional) The text color for the button. Any CSS color value can be used.
- background
- (string) (Optional) The background color for the button. Any CSS color value can be used.
- icon
- (string) (Optional) The class name of an optional icon. Any icon class listed in the icon shortcodes can be used.
- title
- (string) (Optional) Title attribute.
- class
- (string) (Optional) Class attribute.
- id
- (string) (Optional) ID attribute.
- onclick
- (string) (Optional) JavaScript onclick functionality.
[clear]
[clear]