Overview

When you build a Fancy Button, you have the option to configure the Background.

In the Background, there are three display options:

• Background (Outer): The Outer background is the primary background style.
• Background (Inner): The Inner background could have a border, or a separate icon, inside a background image on the outer. This means you can design the overall Outer background and then, for example, design a border or Inner background.
• Hover: Hover is the state of the Fancy Button when a user hovers over the button with their mouse. You have the ability to make this hover state different or remain the same as the unhovered button.
  • Note: Hover options exist for the Outer and Inner background style.

There are three tabs that help you modify your Button styles:

• Background & Border: Modify the color, gradient, image, border, and add rounded corners
• Spacing & Sizing: Choose how to display the button itself
• Adv. Styles: Modify in HTML

The options remain the same for Background (Outer), Background (Inner), and Hover - unless otherwise indicated. The Hover state can only be modified with Background & Border options. It is not configurable through Spacing & Sizing or Adv. Styles.

Background & Border

• Normal/Hover: Normal edits the default view of the button, Hover edits the hover state of the button
  
• Background Color: Choose a color with the drop-down
  
• Background Gradient: 
  
  
  • Note: Background Gradients are supported by modern browsers (like the one you're currently using), but in IE9 or below they will display as a solid color that is an average of your start and stop colors. 
  • Starting Color: Choose what color to start the gradient with
  • Ending Color: Choose what color to end the gradient with
  • Direction: Choose vertical, horizontal, diagonal, or radial
• Background Image: Modify the background image
  
• Border:
  
  
  • Style: Choose a border style (Solid, Dashed, or Dotted)
  • Width: In pixels, specify how wide the border should be
  • Color: Choose a border color with the dropd-won
  • Apply to Sides: Choose which sides of the fancy button to apply border styles to
• Rounded Corners: 
  
  
  • Radius: In either pixels or em units, specify how large the radius of the corners should be
  • Apply to Corners: Choose which corners of the fancy button to apply rounded corners to

Spacing & Sizing

• Force Square (Background (Outer) Only): Force this Fancy Button to always display as a square
• Display:
  • Padding: In either px or em units, specify how wide the outer padding should be
  • Width x Height: In either px or em units, specify the width and height units of the Fancy Button
  • Note: If you choose not to specify custom Padding or Width x Height settings, the default settings will display.

Adv. Styles

• Choose to customize, in HTML, display specifications for different actions (how the Fancy Button will appear when clicked on, when active, when hovered over, etc).