Index: sources/gui/qml/components/TouchRect.qml
===================================================================
diff -u -r174d5078531f9dfbe9cdc45274b852984bb72647 -rfbeafa0714f065bce0403e2e8ce68f6d8fbea6bd
--- sources/gui/qml/components/TouchRect.qml	(.../TouchRect.qml)	(revision 174d5078531f9dfbe9cdc45274b852984bb72647)
+++ sources/gui/qml/components/TouchRect.qml	(.../TouchRect.qml)	(revision fbeafa0714f065bce0403e2e8ce68f6d8fbea6bd)
@@ -1,6 +1,6 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2019-2019 Diality Inc. - All Rights Reserved.
  * \copyright                                                       \n
  *          THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM,  \n
  *          IN PART OR IN WHOLE,                                    \n
@@ -25,13 +25,54 @@
  * which is used a general default round rect button
  */
 Rectangle { id : _root
-    property alias text     : _text
-    property alias button   : _mouseArea
+    property alias text             : _text
+    property alias button           : _mouseArea
 
+    property bool  animated         : false
+    property alias loops            : _clickAnimation.loops
+    property int   duration         : 200
+
+    property bool  disabled         : false
+
+    property color textColor        : Colors.textButton
+    property color borderColor      : Colors.borderButton
+    property color backgroungColor  : Colors.backgroundButtonNormal
+
+    onDurationChanged: {
+        _colorAnimationOn .duration = duration;
+        _colorAnimationOff.duration = duration;
+    }
+
+    function animate(vAnimate) {
+        if (vAnimate) {
+            if ( disabled ) { return }
+            if ( animated ) {
+                _clickAnimation.restart()
+            }
+        } else {
+            _clickAnimation.stop()
+            _root.color = backgroungColor
+        }
+    }
+
+    onBackgroungColorChanged: {
+        _root.color = backgroungColor
+    }
+
+    onDisabledChanged: {
+        if (disabled) {
+            text.color   = Colors.textDisableButton
+            border.color = Colors.borderDisableButton
+        } else {
+            text.color   = textColor
+            border.color = borderColor
+        }
+    }
+
     width   : Variables.touchRectWidth
     height  : Variables.touchRectHeight
     radius  : Variables.touchRectRadius
-    color   : "Transparent"
+    color   : backgroungColor
     border {
         color: Colors.borderButton
         width: Variables.borderWidth
@@ -43,5 +84,21 @@
     }
     MouseArea { id: _mouseArea
         anchors.fill: parent
+        onPressed: {
+            if ( disabled ) { return }
+            animate(true)
+        }
     }
+
+    SequentialAnimation { id: _clickAnimation
+        running: false
+        onStopped: {
+            _root.color = backgroungColor
+        }
+        onFinished: {
+            _root.color = backgroungColor
+        }
+        PropertyAnimation { id: _colorAnimationOn ; target: _root; property: "color"; to: _root.border.color; duration: duration; }
+        PropertyAnimation { id: _colorAnimationOff; target: _root; property: "color"; to: _root.color       ; duration: duration; }
+    }
 }