When you build a Fancy Button, you can 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 can make this hover state different or keep it the same as the unhovered button.
Note:
Hover options exist for the Outer and Inner background styles.
Three tabs 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
Advanced (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 the 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 in the drop-down
Background Gradient:
Note:
Background Gradients are supported by modern browsers (like the one you're currently using), but in Internet Explorer 9 (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 drop-down
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.
Advanced 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).