Button

The Button object creates a button control which the user can click to perform an action. It can also be set to be a checkbox.

HTML elements display on top

Most objects like Sprite draw on to a <canvas> element, which displays like a large image. Objects like Button are in fact HTML elements placed on top of the canvas rather than drawn on the canvas. Therefore, nothing can be displayed on top of it apart from other HTML elements. Using layers and Z order to adjust their layering inside Construct will have no effect.

HTML elements position themselves according to the layer parallax, scale and so on. However since they are not actually drawn into the canvas, it is recommended to avoid using scrolling, parallax and layer scaling with form controls, otherwise the end result can feel unnatural.

Styling buttons

As Button objects are HTML elements, their appearance can be customised using CSS (Cascading Style Sheets). The ID and Class properties can be used to identify the HTML element, and a CSS project file added to apply some styles to it.

Button properties

Type
Either Button for a push-button or Checkbox for a checked/unchecked control.
Text
The text appearing on the button face or checkbox label.
Tooltip
A tooltip that appears in most browsers if the user hovers the mouse over the button and waits. Leave blank for no tooltip.
Initially visibile
Whether or not the button is shown on startup. If Invisible, the button must be shown with the Set visible action.
Enabled
Whether the button is initially enabled. If disabled, the button will be greyed out and cannot be pushed.
Auto font size
Automatically set the font-size property of the element according to the layout and layer scale. This will prevent the font-size CSS property being manually set with the Set CSS style action. Disable if you intend to use Set CSS style to adjust the font-size property.
Checked
If Type is Checkbox, this is the initial check state of the control.
ID Optional
An optional id attribute for the element in the DOM (Document Object Model). This can be useful for CSS styling.
Class Optional
An optional class attribute for the element in the DOM (Document Object Model). This can be useful for CSS styling.

Button conditions

See common conditions for features shared between form control objects.

Is checked
If Type is Checkbox, is true if the control is currently checked.
On clicked
Triggered when the user pushes the button or checks/unchecks the control, either by keyboard, mouse or touch input.

Button actions

See common actions for features shared between form control objects.

Set checked
If Type is Checkbox, set the current check state of the control.
Set text
Set the text on the button face.
Set tooltip
Set the text that appears for the button tooltip. Leave blank for no tooltip.
Toggle checked
If Type is Checkbox, toggles the check state of the control.

Button expressions

The Button object does not have any of its own expressions.

Construct 3 Manual 2022-05-04