Sweet Button Settings


Sweet Button - Setup

  • Link: (link) Add a link the button
    • Default: javascript:void(0)
  • Cursor: (select) The cursor when hovered over.
    • Default: Pointer
    • Possible Values:
      • Default
      • Crosshair
      • Help
      • Move
      • Pointer
      • Progress
      • Wait
      • East Resize
      • North East Resize
      • North West Resize
      • North Resize
      • South East Resize
      • South West Resize
      • South Resize
      • West Resize
      • East West Resize
      • North South Resize
      • Context Menu
      • Alias
      • Copy
      • No Drop
      • Not Allowed
  • Position: (select) The button position.
    • Default: Center
    • Possible Values:
      • Left
      • Right
      • Center
  • Icon Position: (select) The icon position inside the button.
    • Default: Left
    • Possible Values:
      • Left
      • Right
      • None
      • Icon Only
  • Text Align: (select) The text alignment inside the button.
    • Default: Center
    • Possible Values:
      • Left
      • Right
      • Center
  • Font Family: (select) The font family used in the button label
    • Default: Theme Font
    • Possible Values:
      • Theme Font
      • Arial
      • Arial Narrow
      • Arial Black
      • Century Gothic
      • Copperplate Gothic Light
      • Courier New
      • Georgia
      • Geneva
      • Gill Sans
      • Helvetica
      • Helvetica Neue
      • Impact
      • Lucida Console
      • Lucida Sans
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
  • Custom Font: (input) Custom Font Family that is not defined in the Font Family option list.
    • Enable: When Font Family is set to custom
    • Default:
  • Round Corners: (slider) The corner radius for the button
    • Default: 5px
    • Min Value: 0px
    • Max Value: 50px
  • Padding: (number) The padding of the button
    • Default: 14px
    • Min Value: 0px
    • Max Value: 50px
  • Text Size: (number) The font size of the label text
    • Default: 16px
    • Min Value: 5px
    • Max Value: 200px
  • Mobile Text Size: (number) The font size of the label text on Mobile devices (breakpoint at 500px)
    • Default: 14px
    • Min Value: 5px
    • Max Value: 200px
  • Show Drop Shadow?: (checkbox) Use a drop shadow
    • Default: false
  • Blur: (number) The blur of the shadow
    • Enable: When Show Drop Shadow? is set to 1
    • Default: 5px
    • Min Value: 0px
    • Max Value: 10px
  • Fixed Width?: (checkbox) Make the button have a fixed width.
    • Default: false
  • Label Width: (number) The fixed width of the button label. The actual width on the page is width + padding + border.
    • Enable: When Fixed Width? is set to 1
    • Default: 200px
    • Min Value: 20px
    • Max Value: 1200px
  • Icon Width: (number) The fixed width of the button icon. The actual width on the page is width + padding + border.
    • Enable: When Fixed Width? is set to 1
    • Default: 20px
    • Min Value: 5px
    • Max Value: 500px
  • Form Submit?: (checkbox) Submit a form with Sweet Button
    • Default: false

Sweet Button - Animation

  • Animation: (select) The animation effect.
    • Default: None
    • Possible Values:
      • None
      • Bounce
      • Highlight
      • Pulsate
      • Shake
      • Slide
  • Repeat Animation?: (checkbox) Repeat the animation after its complete.
    • Default: false
  • Delay: (number) The delay in ms before the animation begins. This will also be the delay for repeat animations.
    • Default: 1000ms
    • Min Value: 0ms
    • Max Value: 10000ms
  • Speed: (number) The animation speed
    • Default: 100ms
    • Min Value: 0ms
    • Max Value: 10000ms
  • Direction: (select) The direction of the effect.
    • Enable: When Animation is set to bounce
    • Default: Up
    • Possible Values:
      • Up
      • Down
      • Left
      • Right
  • Distance: (number) The distance the button will travel
    • Enable: When Animation is set to bounce
    • Default: 20px
    • Min Value: 0px
    • Max Value: 1000px
  • Times: (number) The number of times the effect will be ran
    • Enable: When Animation is set to bounce
    • Default: 5
    • Min Value: 0
    • Max Value: 100
  • Direction: (select) The direction of the effect.
    • Enable: When Animation is set to shake
    • Default: Left
    • Possible Values:
      • Up
      • Down
      • Left
      • Right
  • Distance: (number) The distance the button will travel
    • Enable: When Animation is set to shake
    • Default: 2px
    • Min Value: 0px
    • Max Value: 1000px
  • Times: (number) The number of times the effect will be ran
    • Enable: When Animation is set to shake
    • Default: 4
    • Min Value: 0
    • Max Value: 100
  • Times: (number) The number of times the effect will be ran
    • Enable: When Animation is set to pulsate
    • Default: 3
    • Min Value: 0
    • Max Value: 100
  • Direction: (select) The direction of the effect.
    • Enable: When Animation is set to slide
    • Default: Left
    • Possible Values:
      • Up
      • Down
      • Left
      • Right
  • Color: (color) The color of the highlight effect
    • Enable: When Animation is set to highlight
    • Allows Opacity: true

Sweet Button - Normal State

  • Style: (select) The icon color style
    • Default: Simple
    • Possible Values:
      • Simple
      • Two Tone
      • Candy
      • Gradient
      • Advanced Gradient
  • Icon: (select) The icon used in the button.
    • Default: Link
    • Possible Values:
      • Custom Icon
      • App.net
      • Book
      • Bookmark
      • Calendar
      • Camera
      • Check
      • Comments
      • Download
      • Edit
      • Envelope
      • Facebook
      • Flag
      • Flickr
      • Google Plus
      • Home
      • Link
      • Pencil
      • Pinterest
      • RSS
      • Share
      • Thumbs Down
      • Thumbs Up
      • Twitter
      • YouTube
  • Info: Icon names can be found at http://fontawesome.io/icons
  • Icon Name: (input) The custom icon class. This class must be a valid Font Awesome icon class - http://fontawesome.io/icons
    • Enable: When Icon is set to custom
    • Default: fa-heart icon-heart
  • Label: (input) The text label of the button.
    • Default: Sweet Button!
  • Border Size: (slider) The size of the button border
    • Default: 0px
    • Min Value: 0px
    • Max Value: 5px
  • Border Color: (color) The color of the button border
    • Allows Opacity: true
  • Border Hover: (color) The color of the button border on hover
    • Allows Opacity: true
  • Button Color: (color) The color of the button
    • Allows Opacity: true
  • Button Color 2: (color) The second color of the button in the advanced gradient.
    • Enable: When Style is set to adv_gradient
    • Allows Opacity: true
  • Text Color: (color) The color of the text
    • Allows Opacity: true
  • Text Shadow: (select) The style for the text shadow
    • Default: None
    • Possible Values:
      • None
      • Black
      • Grey
      • White

Sweet Button - Clicked State

  • Custom Click State?: (checkbox) Change the button color and contents based on click.
    • Default: false
  • Clicked Icon: (select) The icon used in the button after clicked
    • Default: Link
    • Possible Values:
      • Custom Icon
      • App.net
      • Book
      • Bookmark
      • Calendar
      • Camera
      • Check
      • Comments
      • Download
      • Edit
      • Envelope
      • Facebook
      • Flag
      • Flickr
      • Google Plus
      • Home
      • Link
      • Pencil
      • Pinterest
      • RSS
      • Share
      • Thumbs Down
      • Thumbs Up
      • Twitter
      • YouTube
  • Info: Icon names can be found at http://fontawesome.io/icons
  • Icon Name: (input) The custom icon class. This class must be a valid Font Awesome icon class - http://fontawesome.io/icons
    • Enable: When Clicked Icon is set to custom
    • Default: fa-heart icon-heart
  • Clicked Label: (input) The text label of the button after its been clicked.
    • Default: Thanks!
  • Border Color: (color) The color of the button border
    • Allows Opacity: true
  • Border Hover: (color) The color of the button border
    • Allows Opacity: true
  • Clicked Color: (color) The color of the button after a successful submission.
    • Allows Opacity: true
  • Clicked Color 2: (color) The second color of the button after a successful submission in the advacned gradient
    • Enable: When Style is set to adv_gradient
    • Allows Opacity: true
  • Toggle Click State?: (checkbox) If the button is clicked while in clicked state, toggle back to non-clicked state.
    • Default: false
  • Persist Click State?: (checkbox) Persist the button’s click state even on page reload.
    • Default: false
  • Cookie Expire: (number) The number of days until the cookie expires and the state will not be persisted.
    • Enable: When Persist Click State? is set to true
    • Default: 365days
    • Min Value: 1days
    • Max Value: 365days
  • Cookie Name: (input) The name of the cookie created. You do not need to change this unless you know what you are doing.
    • Enable: When Persist Click State? is set to true
    • Default: sweet_button_clicked_%id%
  • Disable on Click?: (checkbox) Disable the link after it has been clicked.
    • Default: false
  • Clear All Clicked Styles?: (checkbox) Clear all the clicked styles from other Sweet Button stacks on the page. This will only affect the styles, not the content of the other buttons. This is a great feature if you want to use Sweet Button to build a menu. This setting will not function if toggle is enabled.
    • Enable: When Toggle Click State? is set to false
    • Default: false
  • Preview Click State: (checkbox) Preview the color of the button after its been clicked.
    • Default: false

Sweet Button - Google Event Tracking

  • Enable Event Tracking?: (checkbox) Track button clicks with Google Analytics Event Tracking.
    • Default: false
  • Category: (input) The name you supply for the group of objects you want to track. (Required)
    • Enable: When Enable Event Tracking? is set to true
    • Default: Button Clicks
  • Action: (input) A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object. (Required)
    • Enable: When Enable Event Tracking? is set to true
    • Default: Download
  • Label: (input) An optional string to provide additional dimensions to the event data.
    • Enable: When Enable Event Tracking? is set to true
    • Default: