Buttons

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”]

 

[button onclick=”alert(‘Clicked!’);”]Default Button[/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]

Standard button parameters

[clear]

[button_link url="http://mysite.com"]Default Button[/button_link]

Link button parameters

[/tab]
[tab title=”Small Button”]

 

[button style=”small” onclick=”alert(‘Clicked!’);”]Small Button[/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]

Standard button parameters

[clear]

[button_link style="small" url="#"]Small Button[/button_link]

Link button parameters

[/tab]
[tab title=”Large Button”]

 

[button style=”large” onclick=”alert(‘Clicked!’);”]Large Button[/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]

Standard button parameters

[clear]

[button_link style="large" url="#"]Large Button[/button_link]

Link button parameters

[/tab]
[tab title=”Impact Button”]

 

[button style=”impactBtn” onclick=”alert(‘Clicked!’);”]Impact Button[/button]

[clear]

Impact buttons draw attention with large bold text to set them apart from other buttons.

 

[button style="impactBtn" onclick=""]Impact Button[/button]

Standard button parameters

[clear]

[button_link style="impactBtn" url="#"]Impact Button[/button_link]

Link button parameters

[/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=”#00B4FF” onclick=”get_quote()”]#00B4FF[/button]
[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-ok” color=”#fff” background=”#00A0B0″ onclick=”get_quote()”]Icon Buttons[/button]
[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]

See all icons

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

Print Friendly, PDF & Email

POST CON CONTENUTO SIMILE:

  1. Contact Form
  2. Icons and List Shortcodes
  3. Video Portfolio
  4. Portfolio