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
- 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
- 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
- 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).
Feedback About the ArticleLet us know what was helpful or not helpful about the article below.
It would be great to see examples instead of screenshots of the same screens I'm seeing. I can see that I am being prompted to enter in a number for width, but I have no idea what to enter. I would like to know what a finished button looks like with a border, different examples of fancy buttons that I can create and how to create that look (like how many pixels to obtain a certain look for the width of a border, for example).
The instructions look easy in fact it's frustrating to say the lest.
I agree with the previous comments. There is some basic information that should be provided simply as part of these tutorials. When should we use ems or pixels? Does one way or another make the site more or less accessible or responsive? What are the best practices? In order to answer these basic questions, I've been told we'd need to purchase customized training. These are basic functions of the module and we shouldn't have to play a guessing game to get the results we want.
Please sign in to leave a comment.