Contents

Style Interactive Elements in Passport Builder

  1. Open your experience in Passport Builder and select a button element.
  2. Open the Style panel in the element settings sidebar.
  3. Set the background color using the color picker.
  4. Set the text color for the button label.
  5. Adjust the border radius to create rounded corners.
  6. Set the border color and width if a border is desired.
  7. Configure the padding (top/bottom and left/right) for button size.
  8. Set the font family for the button text.
  9. Adjust the font size and weight for the label.
  10. Set the text alignment within the button.
  11. Configure hover state styles (background color change on hover).
  12. Set the transition duration for smooth hover animations.
  13. Select a hotspot element and open its style panel.
  14. Set the hotspot background color and opacity.
  15. Configure the hotspot border (color, width, style).
  16. Set the hotspot shape (circle or square) using border radius.
  17. Add a pulsing animation effect to the hotspot if available.
  18. Configure the icon displayed inside the hotspot.
  19. Set the icon color and size.
  20. Open the Advanced CSS panel for custom overrides.
  21. Enter custom CSS properties to fine-tune element appearance.
  22. Preview the styled elements in the experience viewer.
  23. Check the styling at different viewport sizes.
  24. Adjust any styles that don't translate well to mobile.
  25. Click Save to apply all interactive element styles.
Created 2026-04-09 Last updated 2026-04-09

Was this page helpful?

Related articles

Language
Theme
Legal