Event Styles

Each button event supports four style layers to control appearance and behavior across different states.

Four Style Layers

Normal Style (style)

The base CSS style for the button:

{
  "transition": "all 200ms",
  "padding": "21px 55px",
  "margin": "8px 13px"
}

Hover Style (hoverStyle)

Applied when the mouse hovers over the button, merged with the normal style:

{
  "padding": "21px 88px",
  "transform": "scale(1.05)"
}

Enter Style (enterStyle)

Entrance animation when the button appears. Supports Animate.css:

{
  "animationName": "fadeIn",
  "animationDuration": "1s"
}

When multiple buttons enter simultaneously, the system automatically staggers each by 150ms for a sequential reveal effect.

Leave Style (leaveStyle)

Exit animation when the button disappears. Note: during scene transitions, buttons may be destroyed immediately; this style may not fully play.

Style Priority

Button override > Theme preset > System default

For most buttons, manage styles via theme presets and only override on individual buttons that need special treatment.

Button Media

Text buttons and media buttons support additional media settings:

Property	Description
media	Background image/video
mediaLoopStartTime	Loop start time for background video
hover	Overlay media shown on hover (supports transparent png/webm)
hoverLoopStartTime	Loop start time for hover video
hideMedia	Hide main media on hover

Button media can be controlled by theme presets and overridden per button.