Informative Buttons

The component to enrich your SharePoint intranet's pages without making navigation cumbersome.

Last updated 10 days ago

Was this helpful?

Informative Buttons

The component to enrich your SharePoint intranet's pages without making navigation cumbersome.

What is Informative Buttons

This web part facilitates the promotion of corporate initiatives, showcases intranet features, and ensures convenient access to external websites through captivating new graphics.

You can personalize button icons to offer clues about their content, enticing users to explore further without navigating away from the current page. By hovering the cursor over the graphics, hidden information is unveiled.

Explore the advantages of Informative Buttons by to learn more.

Add the Informative Buttons web part to a SharePoint page

If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter Hover Button to quickly find and select the Informative Buttons web part, which is named "IAI - Hover button".

Please note, the button takes up the entire size of the SharePoint section.

Therefore, you need to select the section size choosing from the different layouts, and the button size will adapt accordingly, as shown below:

Configuration

View settings

The view settings allows you to customize the appearance of your application by adjusting various layout settings.

By opening this first configuration, you will see the following options:

Do you want to hide the background? You can choose to hide or display the webpart background The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
Do you want to hide the background shadow? You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
Select the type of background shadow If you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
- If you select High contrast, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
- By choosing the Light background shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
- Finally, the Dark background shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.

Front button settings

In this section, you can configure the icon and the title associated to the button.

Buttons are strategically crafted to grab users' attention, enticing them to delve into hidden content. The titles and icons are there to guide them to the information they seek, saving time that would otherwise be spent searching or navigating various pages on the website.

If you're not in edit mode already, click Edit at the top right of the page.

This section includes the following fields:

In the first field, copy and paste the link of the icon you want to use to illustrate the title.

You need to upload the icon in advance to a folder on SharePoint Online, specifically in the Site contents of the intranet, where all users have access (see below).

How to upload a picture to SharePoint?

Click on the Settings icon at the top right of the page, and then on Site contents.

Select the folder where you want to upload your icon (e.g., Site Assets) and upload the picture.
Select the image and click on the Info icon on the right of the top bar.

Go back to the page with the Informative Buttons web part and insert the path of the icon in the required field.

Below is an example of an icon added to a button:

In the Title field, write the title of the button. The title appears to the right of the icon, as shown in the example below:

Back button settings

This section allows you to enrich your button with additional information, enabling users to explore further.

If you're not in edit mode already, click Edit at the top right of the page.

Here you can input the title of the back button and a text with additional information. Users will be able to read this text by hovering their cursor over the button. See an example below:

For further customization, a hyperlink can be added to the back button paragraph. This will encourage users to click the link and explore content. To insert a hyperlink, take the following steps:

First of all, write your text in the Paragraph field.
Choose where you want to insert the link (at the beginning, in the middle or at the end of the text) and copy and paste the following code:

<a href="https://www.google.it/" target="_blank" style="color:red; text-decoration:none">Clicca qui<a/>

Highlighted in yellow are the sections to be modified according to your preferences.

Red = the color you want to appear in your text. You can change the color by writing the appropriate color in English.
Clicca qui = Call To Action inviting the user to access the link. You can modify the CTA text as you wish.

Below is an example of custom text with a link using the following code: <a href="https://www.google.it/" target="_blank" style="color:red; text-decoration:none">Clicca qui<a/>

Alternatively, you can copy and paste an internal or external link into the Button url field. Users will simply need to click the button to access the link and explore content. Thanks to the Open on a new tab field, you can choose whether to open the link on the same tab or a new tab.

It is not possible to customize the color of the back button title.

Colors settings

This section allows you to customize the different button colors. If you want more possibilities with respect to your graphic theme, you can modify the colors of the text and the background both in the front button and in the back button.

Do you want to customize colors? This option allows you to choose and customize the colors of the front button. You can select the background and the text color by using the color picker or by entering a specific hex code.

See an example below with red background and black text:

Customize hover colors? This option allows you to customize hover colors, that is to say the colors of the back button. You can select the background and the text color by using the color picker or by entering a specific hex code.

See an example below with pink background and black text:

When you are done, don't forget to publish your edits by clicking on Republish at the top right of the page.