Graphic Links


Graphic Links
 






Configure Background Options in a Fancy Button

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
    CE_GraphicLinks_NormalOrHover.png
  • Background Color: Choose a color with the drop-down
    CE_GraphicLinks_BackgroundColor.png
  • Background Gradient: 
    CE_GraphicLinks_BackgroundGradient.png
    • 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
    CE_GraphicLinks_BackgroundImage.png
  • Border:
    CE_GraphicLinks_Border.png

    • 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: 
    CE_GraphicLinks_RoundedCorners.png
    • RadiusIn 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

CE_GraphicLinks_SpacingSizing.png

  • 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

CE_GraphicLinks_AdvancedStyles.png

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



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback