Perfect Widgets Sample: HTML5 Push Button Control

Create a new instrument.

 

Add button underlayer that will be a RoundedRectangle element and button text as a Label element.

 

 

 

Add the PushButton element and insert RoundedRectangle and Label inside it.

 

 

 

Now, let’s create several styles to make the button respond to mouse actions.

 

 

 

Set bindings for the RoundedRectangle element that will change styles.

 

if(PushButton1.Pressed,

   "Pressed",

   if(PushButton1.Hot,

      "Hover",

      "Idle"))

 

 

Change Label text and export the control to JSON format.

 

Now you can load the widget and subscribe to the button onClick event:

 

button.add_onClick(updateVal);

 

 

Here is the result – a good working button!

Download sample here: PushButtonDemoPage.zip

Add Feedback