diff -r f0a822ef9fa0 -r 99c4521bb844 svghmi/widget_button.ysl2
--- a/svghmi/widget_button.ysl2	Tue May 26 09:58:20 2020 +0200
+++ b/svghmi/widget_button.ysl2	Tue May 26 10:53:02 2020 +0200
@@ -1,20 +1,33 @@
 // widget_button.ysl2
 
-template "widget[@type='Button']", mode="widget_class"
-    ||
-    class ButtonWidget extends Widget{
-        frequency = 5;
-        init() {
-            this.element.addEventListener(
-              "mousedown",
-              evt => {
-                  change_hmi_value(this.indexes[0], "=1");
-              });
-            this.element.addEventListener(
-              "mouseup",
-              evt => {
-                  change_hmi_value(this.indexes[0], "=0");
-              });
-        }
-    }
-    ||
+template "widget[@type='Button']", mode="widget_defs" {
+    param "hmi_element";
+    optional_labels("active inactive");
+    | frequency: 5,
+    | on_mouse_down: function(evt) {
+    |     if (this.active_style && this.inactive_style) {
+    |         this.active_elt.setAttribute("style", this.active_style);
+    |         this.inactive_elt.setAttribute("style", "display:none");
+    |     }
+    |     change_hmi_value(this.indexes[0], "=1");
+    | },
+    | on_mouse_up: function(evt) {
+    |     if (this.active_style && this.inactive_style) {
+    |         this.active_elt.setAttribute("style", "display:none");
+    |         this.inactive_elt.setAttribute("style", this.inactive_style);
+    |     }
+    |     change_hmi_value(this.indexes[0], "=0");
+    | },
+    | active_style: undefined,
+    | inactive_style: undefined,
+    | init: function() {
+    |   this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
+    |   this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
+    |   if (this.active_style && this.inactive_style) {
+    |       this.active_elt.setAttribute("style", "display:none");
+    |       this.inactive_elt.setAttribute("style", this.inactive_style);
+    |   }
+    |   this.element.setAttribute("onmousedown", "hmi_widgets['«$hmi_element/@id»'].on_mouse_down(evt)");
+    |   this.element.setAttribute("onmouseup", "hmi_widgets['«$hmi_element/@id»'].on_mouse_up(evt)");
+    | },
+}
\ No newline at end of file