Build a Fancy Button

Prev Next

Who can use this feature?

System Administrators | Owner

  1. Navigate to Modules, select Content, then click Graphic Links:CivicPlus Municipal Websites Central interface navigation highlighting the Graphic Links section.

  2. Select the category you want to add the Fancy Button to: A list of graphic links with highlighted category '2025 - Default' in a management interface.

    Note:
    If you want to add a second set of buttons that are independent of location, create a new category.

  3. Click Add Item:An interface showing options to add items and manage graphic links in a web application.

  4. Select Insert Fancy Button:An interface for adding graphic links with options for images and buttons.

  5. Configure the Background (Outer) and Background (Inner) options:An interface for a Fancy Button Builder with options for background and text styles.

    Notes:

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

    • 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 the Text Style options: An interface for a Fancy Button Builder with options for text style and button insertion.

  7. To complete, click Insert Fancy Button:An interface for creating a fancy button with options for text style and insertion. The insert fancy button is highlighted.

    Note:
    After you insert the button, you still need to select a save option.

  8. Configure additional options:Form fields for entering a web address and display settings on a webpage for a fancy button.

    • 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:Buttons for saving, publishing, and canceling actions on a user interface. The save, and save and publish buttons are highlighted.

    • Save: Saves changes as a draft

    • Save and Publish: Saves changes, publishes to live view