In situations where you aim to enhance user guidance without introducing visual clutter to an existing webpage element, employing a transparent button proves to be an effective and unobtrusive solution.
Scenario: You find yourself in a scenario where there is a desire to add a help item to an element that already exists on the page. However, the goal is to avoid cluttering the visual aesthetics of the page, eliminating the use of inline icons or buttons that might disrupt the overall design.
Solution: The recommended solution is to leverage a transparent button. This approach allows you to seamlessly integrate additional guidance without compromising the page's aesthetics. The transparent nature of the button ensures that it remains inconspicuous, blending into the existing design while still providing users with an intuitive means to access help content:
In the example above, the call icon in the Outlook app scope is made to flash. Follow these steps to make your own flashing transparent button.
- Follow these steps to create a button, but with the following changes:
- Position the button over the element you would like to highlight.
- Make the button background and text color transparent by moving the transparency sliders all the way to the left.
- Click the Show Pulse toggle to Yes.
- Preview your help item and make adjustments as needed.