Styling
Hover, Focus, and Pressed Styles
Show players which button is pointed at, selected, pressed, or disabled.
Add state rules to the button's CSS:
.menu-button { background-color: #17314a; color: #ffffff; }
.menu-button:hover { background-color: #245b7a; }
.menu-button:focus, .menu-button:gamepad-focus { outline: 2px solid #ffffff; }
.menu-button:active { transform: scale(0.98); }
.menu-button:disabled { opacity: 0.5; }The button needs class="menu-button". Save, preview it, and try a mouse and
keyboard. Use Interaction Testing in Preview to force a state while editing.
| State | When it applies |
|---|---|
:hover | The pointer is over the element |
:focus | The element has focus |
:gamepad-focus | The element has gamepad focus |
:active | The control is being pressed |
:holding | A ui:hold-ms hold is in flight on the control (see Hold to activate); --calmui-hold-progress (0..1) is available to it and its descendants |
:disabled | The control is disabled |
A disabled style does not disable a button by itself. Set the actual disabled
attribute or bind it to a boolean value.
Use pointer-events: none on decorative content that must not receive pointer
input. The normal value is auto. For clicks that run game code, see
Button actions.