[ { "id" : "button", "type" : "ClutterRectangle", "width" : "16 em", "height" : "6 em", "color" : "rgb(255, 0, 0)", "opacity" : 128, "scale-gravity" : "center", "reactive" : true, "signals" : [ { "name" : "button-press-event", "handler" : "on_button_press" }, { "name" : "enter-event", "states" : "button-states", "target-state" : "hover" }, { "name" : "leave-event", "states" : "button-states", "target-state" : "base" }, { "name" : "button-press-event", "states" : "button-states", "target-state" : "active" }, { "name" : "button-release-event", "states" : "button-states", "target-state" : "base" } ] }, { "id" : "button-states", "type" : "ClutterState", "duration" : 250, "transitions" : [ { "source" : null, "target" : "base", "keys" : [ [ "button", "opacity", "linear", 128 ], [ "button", "scale-x", "ease-in-cubic", 1.0 ], [ "button", "scale-y", "ease-in-cubic", 1.0 ], [ "button", "color", "linear", "rgb(255, 0, 0)" ] ] }, { "source" : null, "target" : "hover", "keys" : [ [ "button", "opacity", "linear", 255 ], [ "button", "scale-x", "ease-out-bounce", 1.4 ], [ "button", "scale-y", "ease-out-bounce", 1.4 ], [ "button", "color", "linear", "rgb(0, 255, 0)" ] ] }, { "source" : null, "target" : "active", "keys" : [ [ "button", "opacity", "linear", 255 ], [ "button", "color", "linear", "rgb(0, 0, 255)" ] ] } ] } ]