Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Configure Background Options in a Fancy Button

  • Updated:

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
    normal and hover drop-down menus
  • Background Color: Choose a color with the drop-down
    background color drop-down list
  • Background Gradient: 
    background gradient options
    • 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
    background image options
  • Border:
    border options
    • 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: 
    rounded corners options
    • 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

spacing and sizing options

  • 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

advanced styles HTML code

  • 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 Article

Let us know what was helpful or not helpful about the article below.

5 comments

Date Votes
  • Tammy Getchell

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

    3
  • Tom Pepe

    The instructions look easy in fact it's frustrating to say the lest. 

    2
  • Jessica Miller

    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.

    1
  • John Lanza

    Agree with these comments. Specific examples in a training video would be great!

    1
  • Coty Woodside

    A training video would be ideal. 

     

    0

Please sign in to leave a comment.