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.

Build a Fancy Button

  • Updated:

This article will show you how to create a Fancy Button. A fancy button can be responsive to hovering and includes images and text.

 

Who can use this feature?

Engage_-_System_Admin.png Engage_-_Slash.png Engage_-_Owner.png

 

 

Instructions

  1. Navigate to Modules > Content > Graphic Links
    modules_content_graphic_links.jpg
  2. Select the category you want to add the Fancy Button to
    build_a_fancy_button_select_category.jpg
    • Note: If you want to add a second set of buttons that are independent of location, create a new category.
  3. Click Add Item
    build_a_fancy_button_add_item.jpg
  4. Select Insert Fancy Button
    build_a_fancy_button_insert_fancy_button.jpg
  5. Configure Background (Outer) and Background (Inner) options
    build_a_fancy_button_background_options.jpg
    • Note: You will want to have enough spaces before the name to ensure that the button is visible and that the name will not appear on the button image.
    • Note: The Hover option is what appears when a user hovers over the button. See our article Create a Reactive Fancy Button to view how to make the Hover option a different image.
  6. Configure Text Style options
    build_a_fancy_button_configure_text_styles.jpg
  7. To complete, click Insert Fancy Button
    build_a_fancy_button_insert_fancy_button_insert.jpg
    • Note: After you insert the button, it is still needed to Save or Save and Publish the button.
  8. Configure additional options
    build_a_fancy_button_configure_additional_options.jpg
    • Web Address: Add a link
      • Open in new window: Open the link in a new browser window
    • Display: Add a Starting On (publishing) date and a Stopping On (expiration) date
  9. Select Save or Save and Publish
    build_a_fancy_button_save_options.jpg
    • Save: Saves changes as a draft
    • Save and Publish: Saves changes, publishes to live view 

Feedback About the Article

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

6 comments

Date Votes
  • Steve Mousseau

    You didn't show how to build the button, only how to barely create it. How do yo set boarders, images etc?

    2
  • Michael Tjoelker

    Also hoping for a more detailed article on how to do this! Thank you

    4
  • Karen Ramsey

    See Steve and Michael's comments above.

    0
  • Ehron Ostendorf

    I fourth Karen's comment about Steve and Michael's request. I was hoping this help center wouldn't be like Facebook's (Meta) where people comment for help and are ignored, but seeing Steve's comment from a year ago doesn't give me hope.

    0
  • Lindsey Harmon

    Hi Ehron Ostendorf and all previous commenters,

     

    Thank you for sharing your feedback. I have made a note of your suggestions on how our team can make this article more helpful, and we will be working to get it updated soon.

     

    If you have any questions about Fancy Buttons, or if there is anything else we can assist with, please reach out to our Support team.

    0
  • Cam Johnson

    I would like to know about accessibility and the use of this fancy-button builder. Will it have proper coding so that someone using assistive technology (screen reader) will know that it’s a clickable button? Aria-labeling?

    0

Please sign in to leave a comment.