Skip to main content
Web Central Quarterly Enhancements Webinar | Watch Now...

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.

3 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?

    1
  • Michael Tjoelker

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

    3
  • Karen Ramsey

    See Steve and Michael's comments above.

    0

Please sign in to leave a comment.