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 styles.
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
- 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 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
- 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
- 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
- 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
- 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.
- 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).