diff --git a/ButtonDemo/.gitignore b/ButtonDemo/.gitignore
new file mode 100644
index 0000000..a231b3f
--- /dev/null
+++ b/ButtonDemo/.gitignore
@@ -0,0 +1,24 @@
+
+#///////////////////////////
+# Cocos Creator 3D Project
+#///////////////////////////
+library/
+temp/
+local/
+build/
+profiles/
+native
+#//////////////////////////
+# NPM
+#//////////////////////////
+node_modules/
+
+#//////////////////////////
+# VSCode
+#//////////////////////////
+.vscode/
+
+#//////////////////////////
+# WebStorm
+#//////////////////////////
+.idea/
\ No newline at end of file
diff --git a/ButtonDemo/assets/scenes.meta b/ButtonDemo/assets/scenes.meta
new file mode 100644
index 0000000..be7b8ed
--- /dev/null
+++ b/ButtonDemo/assets/scenes.meta
@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "3b99d03a-13c2-4098-bcbb-07ba558cc36d",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}
diff --git a/ButtonDemo/assets/scenes/scene.scene b/ButtonDemo/assets/scenes/scene.scene
new file mode 100644
index 0000000..d57ac36
--- /dev/null
+++ b/ButtonDemo/assets/scenes/scene.scene
@@ -0,0 +1,1057 @@
+[
+  {
+    "__type__": "cc.SceneAsset",
+    "_name": "",
+    "_objFlags": 0,
+    "_native": "",
+    "scene": {
+      "__id__": 1
+    }
+  },
+  {
+    "__type__": "cc.Scene",
+    "_name": "",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      }
+    ],
+    "_active": true,
+    "_components": [],
+    "_prefab": null,
+    "autoReleaseAssets": false,
+    "_globals": {
+      "__id__": 40
+    },
+    "_id": "f46876e4-e81b-4931-b493-6d367be385e7"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Canvas",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 5
+      },
+      {
+        "__id__": 18
+      },
+      {
+        "__id__": 28
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 33
+      },
+      {
+        "__id__": 35
+      },
+      {
+        "__id__": 37
+      },
+      {
+        "__id__": 39
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 480,
+      "y": 320,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "3fYAmXJJ1JOZ0YqrPb9xoo"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Camera",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 1000
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 1073741824,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "6bpxy4/gFKkZ7gYASTyH/4"
+  },
+  {
+    "__type__": "cc.Camera",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 3
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_projection": 0,
+    "_priority": 1073741824,
+    "_fov": 45,
+    "_fovAxis": 0,
+    "_orthoHeight": 320,
+    "_near": 1,
+    "_far": 2000,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_depth": 1,
+    "_stencil": 0,
+    "_clearFlags": 6,
+    "_rect": {
+      "__type__": "cc.Rect",
+      "x": 0,
+      "y": 0,
+      "width": 1,
+      "height": 1
+    },
+    "_aperture": 19,
+    "_shutter": 7,
+    "_iso": 0,
+    "_screenScale": 1,
+    "_visibility": 41943040,
+    "_targetTexture": null,
+    "_id": "67bLDNuKtASoWrrj8dWP+c"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Button-1",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [
+      {
+        "__id__": 6
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 13
+      },
+      {
+        "__id__": 15
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": -200,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "69pZ1+mNBPcoh3cn7p/jBD"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 512,
+    "_parent": {
+      "__id__": 5
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 7
+      },
+      {
+        "__id__": 9
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "f8lvpKnVZBqKN6PW+FYgw8"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 8
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "aa7nsqjS1NebE2UYkFSwY4"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "07QMd0h1dLcYd/vjigaip6"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 10
+    },
+    "_visFlags": 0,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_string": "button 1",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 20,
+    "_fontSize": 20,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 1,
+    "_enableWrapText": false,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_id": "04yXdWFzhI9qlKy1d5tKNF"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "ee3IZdy2dLIaAWpjI7P0FL"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 12
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "63x6vfP25CiJTnLNXYwiEW"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "98TYGMtwRBTYZZn4EZmhzJ"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 14
+    },
+    "_visFlags": 0,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": "0eavQU8kNOZqWV1jpNt+AE"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "77BcV1zfNHo4LI4KRqZupe"
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 16
+    },
+    "clickEvents": [
+      {
+        "__id__": 17
+      }
+    ],
+    "_interactable": true,
+    "_transition": 2,
+    "_normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_hoverColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_pressedColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_normalSprite": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_hoverSprite": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_pressedSprite": {
+      "__uuid__": "544e49d6-3f05-4fa8-9a9e-091f98fc2ce8@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_disabledSprite": {
+      "__uuid__": "951249e0-9f16-456d-8b85-a6ca954da16b@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_duration": 0.1,
+    "_zoomScale": 1.2,
+    "_target": {
+      "__id__": 5
+    },
+    "_id": "63dw3DaUlCHp763mCBMrfo"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "2fOwBXUwBNvaJ4NyyrOq4C"
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 2
+    },
+    "component": "",
+    "_componentId": "a59f98tBdxJlJIv2bTQ9DcL",
+    "handler": "onClick_1",
+    "customEventData": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Button-2",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [
+      {
+        "__id__": 19
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 24
+      },
+      {
+        "__id__": 26
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 200,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "1cXoTNxW5EU6FmgkYcao4J"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 512,
+    "_parent": {
+      "__id__": 18
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 20
+      },
+      {
+        "__id__": 22
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "b6Y/GtDfpNoIGRHpZRlyb8"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 19
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 21
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "34pPtRqpBHRoSL4su/I150"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "07QMd0h1dLcYd/vjigaip6"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 19
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 23
+    },
+    "_visFlags": 0,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_string": "button 1",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 20,
+    "_fontSize": 20,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 1,
+    "_enableWrapText": false,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_id": "84j1OrUPJH9Ycq3E/3O6eW"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "ee3IZdy2dLIaAWpjI7P0FL"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 18
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 25
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 100,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "dd0Itq25VG3Yu2Rv0blQzz"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "98TYGMtwRBTYZZn4EZmhzJ"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 18
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 27
+    },
+    "_visFlags": 0,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_spriteFrame": {
+      "__uuid__": "20835ba4-6145-4fbc-a58a-051ce700aa3e@f9941",
+      "__expectedType__": "cc.SpriteFrame"
+    },
+    "_type": 1,
+    "_fillType": 0,
+    "_sizeMode": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_useGrayscale": false,
+    "_atlas": null,
+    "_id": "bdRzwiL01FupLjFv5B8ltF"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "77BcV1zfNHo4LI4KRqZupe"
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "Label",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 29
+      },
+      {
+        "__id__": 31
+      }
+    ],
+    "_prefab": null,
+    "_lpos": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": -121.196,
+      "z": 0
+    },
+    "_lrot": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_lscale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_layer": 33554432,
+    "_euler": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_id": "f59VnDjdtPHKety6DubIZe"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 28
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 30
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 42.26,
+      "height": 50.4
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "f4cP2lCsFCYqZul2V8MjJV"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "c68UOAlNhN171Umca6yVvF"
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 28
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 32
+    },
+    "_visFlags": 0,
+    "_customMaterial": null,
+    "_srcBlendFactor": 2,
+    "_dstBlendFactor": 4,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_string": "label",
+    "_horizontalAlign": 1,
+    "_verticalAlign": 1,
+    "_actualFontSize": 20,
+    "_fontSize": 20,
+    "_fontFamily": "Arial",
+    "_lineHeight": 40,
+    "_overflow": 0,
+    "_enableWrapText": true,
+    "_font": null,
+    "_isSystemFontUsed": true,
+    "_isItalic": false,
+    "_isBold": false,
+    "_isUnderline": false,
+    "_underlineHeight": 2,
+    "_cacheMode": 0,
+    "_id": "2fH47jBTRJk5JYcT4RAhO6"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "2frm37uaJHQr0AEEaYyM82"
+  },
+  {
+    "__type__": "cc.UITransform",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 34
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 960,
+      "height": 640
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_id": "780zTXIOlGQJLJP167JTH5"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "0dngp/9gNO34wUQjZfN/CX"
+  },
+  {
+    "__type__": "cc.Canvas",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 36
+    },
+    "_cameraComponent": {
+      "__id__": 4
+    },
+    "_alignCanvasWithScreen": true,
+    "_id": "09DFLstpdDx61zuX8Yl/0X"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "3f2oTdCepERZdpmIfLsrhd"
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": {
+      "__id__": 38
+    },
+    "_alignFlags": 45,
+    "_target": null,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_horizontalCenter": 0,
+    "_verticalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_alignMode": 2,
+    "_lockFlags": 0,
+    "_id": "b2OfkEKEhHzam4w1rEZlp0"
+  },
+  {
+    "__type__": "cc.CompPrefabInfo",
+    "fileId": "e8a+bU/8dPDbbJguUzLdoF"
+  },
+  {
+    "__type__": "a59f98tBdxJlJIv2bTQ9DcL",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "txt": {
+      "__id__": 31
+    },
+    "btn2": {
+      "__id__": 18
+    },
+    "btn1": {
+      "__id__": 15
+    },
+    "_id": "37XDSn2WRL57OVwK0/QrkW"
+  },
+  {
+    "__type__": "cc.SceneGlobals",
+    "ambient": {
+      "__id__": 41
+    },
+    "shadows": {
+      "__id__": 42
+    },
+    "_skybox": {
+      "__id__": 43
+    },
+    "fog": {
+      "__id__": 44
+    }
+  },
+  {
+    "__type__": "cc.AmbientInfo",
+    "_skyColor": {
+      "__type__": "cc.Color",
+      "r": 51,
+      "g": 128,
+      "b": 204,
+      "a": 1
+    },
+    "_skyIllum": 20000,
+    "_groundAlbedo": {
+      "__type__": "cc.Color",
+      "r": 51,
+      "g": 51,
+      "b": 51,
+      "a": 255
+    }
+  },
+  {
+    "__type__": "cc.ShadowsInfo",
+    "_type": 0,
+    "_enabled": false,
+    "_normal": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 1,
+      "z": 0
+    },
+    "_distance": 0,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 76,
+      "g": 76,
+      "b": 76,
+      "a": 255
+    },
+    "_autoAdapt": true,
+    "_pcf": 0,
+    "_bias": 0.00001,
+    "_packing": false,
+    "_linear": true,
+    "_selfShadow": false,
+    "_normalBias": 0,
+    "_near": 1,
+    "_far": 30,
+    "_aspect": 1,
+    "_orthoSize": 5,
+    "_maxReceived": 4,
+    "_size": {
+      "__type__": "cc.Vec2",
+      "x": 512,
+      "y": 512
+    }
+  },
+  {
+    "__type__": "cc.SkyboxInfo",
+    "_envmap": null,
+    "_isRGBE": false,
+    "_enabled": false,
+    "_useIBL": false
+  },
+  {
+    "__type__": "cc.FogInfo",
+    "_type": 0,
+    "_fogColor": {
+      "__type__": "cc.Color",
+      "r": 200,
+      "g": 200,
+      "b": 200,
+      "a": 255
+    },
+    "_enabled": false,
+    "_fogDensity": 0.3,
+    "_fogStart": 0.5,
+    "_fogEnd": 300,
+    "_fogAtten": 5,
+    "_fogTop": 1.5,
+    "_fogRange": 1.2
+  }
+]
\ No newline at end of file
diff --git a/ButtonDemo/assets/scenes/scene.scene.meta b/ButtonDemo/assets/scenes/scene.scene.meta
new file mode 100644
index 0000000..d61edb9
--- /dev/null
+++ b/ButtonDemo/assets/scenes/scene.scene.meta
@@ -0,0 +1,11 @@
+{
+  "ver": "1.1.27",
+  "importer": "scene",
+  "imported": true,
+  "uuid": "a7cfb650-4de4-4ab2-aa56-6f7cdc46e809",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/ButtonDemo/assets/scripts.meta b/ButtonDemo/assets/scripts.meta
new file mode 100644
index 0000000..ce1869a
--- /dev/null
+++ b/ButtonDemo/assets/scripts.meta
@@ -0,0 +1,12 @@
+{
+  "ver": "1.1.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "abf4fb75-3db7-4a2d-b08b-6ddfda0d8680",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "compressionType": {},
+    "isRemoteBundle": {}
+  }
+}
diff --git a/ButtonDemo/assets/scripts/ButtonUtil.ts b/ButtonDemo/assets/scripts/ButtonUtil.ts
new file mode 100644
index 0000000..4e882cf
--- /dev/null
+++ b/ButtonDemo/assets/scripts/ButtonUtil.ts
@@ -0,0 +1,59 @@
+import { Button, Component, EventHandler, Node } from "cc";
+
+/**
+ * 对button操作的简单封装
+ * 版本为ccc 3.1.x
+ */
+export default class ButtonUtil {
+
+    /**
+     * 
+     * @param button 组件
+     * @param node 事件所在脚本的节点
+     * @param component 事件所在脚本
+     * @param callback 事件名字
+     * @param customData 数据
+     */
+    public static AddClick(button: Button, node: Node, component: string, callback: string, customData?: any) {
+        let clickEventHandler = new EventHandler();
+        clickEventHandler.target = node;
+        clickEventHandler.component = component;
+        clickEventHandler.handler = callback;
+        clickEventHandler.customEventData = customData || null;
+
+        button.clickEvents.push(clickEventHandler);
+
+    }
+
+    /**
+     * 
+     * @param node 添加组件的节点
+     * @param zoomScale 绽放因子 默认0.95
+     * @returns 
+     */
+    public static AddScaleButton(node: Node, zoomScale: number = 0.95): Button {
+        let button = node.addComponent(Button);
+        button.target = node;
+        button.transition = Button.Transition.COLOR;
+        button.duration = 0.1;
+        button.zoomScale = zoomScale;
+        return button;
+    }
+
+    /**
+     * 
+     * @param button 组件
+     * @param state 是否禁用状态 默认为false
+     */
+    public static Interactable(button: Button | Node, state: boolean) {
+        if (button instanceof Button) {
+            button.interactable = state;
+        } else if (button instanceof Node) {
+            button = button.getComponent(Button)!;
+            button && (button.interactable = state);
+        }
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/ButtonDemo/assets/scripts/ButtonUtil.ts.meta b/ButtonDemo/assets/scripts/ButtonUtil.ts.meta
new file mode 100644
index 0000000..f2733fa
--- /dev/null
+++ b/ButtonDemo/assets/scripts/ButtonUtil.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "1cdee820-8f9e-41d0-8f2e-6b2496c4ec1d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/ButtonDemo/assets/scripts/Scene.ts b/ButtonDemo/assets/scripts/Scene.ts
new file mode 100644
index 0000000..e6afc2e
--- /dev/null
+++ b/ButtonDemo/assets/scripts/Scene.ts
@@ -0,0 +1,53 @@
+
+import { _decorator, Component, Node, Label, Button, EventTouch } from 'cc';
+import ButtonUtil from './ButtonUtil';
+const { ccclass, property } = _decorator;
+
+@ccclass('Scene')
+export class Scene extends Component {
+
+    @property(Label)
+    txt: Label = null!;
+
+    @property(Node)
+    btn2: Node = null!;
+
+    @property(Button)
+    btn1: Button = null!;
+
+    onLoad() {
+        //手动添加button组件跟事件
+        let btn = ButtonUtil.AddScaleButton(this.btn2);
+        ButtonUtil.AddClick(btn, this.node, 'Scene', 'onClick_2');
+        console.log('this.btn1',this.btn1);
+    }
+
+    start() {
+        // [3]
+    }
+
+    onClick_1(event: EventTouch) {
+        console.log('event 1', event);
+        this.txt.string = 'button 1'
+    }
+
+    onClick_2(event: EventTouch) {
+        console.log('event 2', event);
+        this.txt.string = 'button 2';
+    }
+
+    // update (deltaTime: number) {
+    //     // [4]
+    // }
+}
+
+/**
+ * [1] Class member could be defined like this.
+ * [2] Use `property` decorator if your want the member to be serializable.
+ * [3] Your initialization goes here.
+ * [4] Your update function goes here.
+ *
+ * Learn more about scripting: https://docs.cocos.com/creator/3.0/manual/en/scripting/
+ * Learn more about CCClass: https://docs.cocos.com/creator/3.0/manual/en/scripting/ccclass.html
+ * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.0/manual/en/scripting/life-cycle-callbacks.html
+ */
diff --git a/ButtonDemo/assets/scripts/Scene.ts.meta b/ButtonDemo/assets/scripts/Scene.ts.meta
new file mode 100644
index 0000000..f59f53b
--- /dev/null
+++ b/ButtonDemo/assets/scripts/Scene.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "a59f9f2d-05dc-4994-922f-d9b4d0f4370b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
diff --git a/ButtonDemo/package.json b/ButtonDemo/package.json
new file mode 100644
index 0000000..30679c7
--- /dev/null
+++ b/ButtonDemo/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "ButtonDemo",
+  "type": "3d",
+  "uuid": "3d032722-33df-4bb3-bdfb-b61a9bfc4301",
+  "version": "3.1.1"
+}
diff --git a/ButtonDemo/settings/v2/packages/builder.json b/ButtonDemo/settings/v2/packages/builder.json
new file mode 100644
index 0000000..af081f3
--- /dev/null
+++ b/ButtonDemo/settings/v2/packages/builder.json
@@ -0,0 +1,3 @@
+{
+  "__version__": "1.2.8"
+}
diff --git a/ButtonDemo/settings/v2/packages/device.json b/ButtonDemo/settings/v2/packages/device.json
new file mode 100644
index 0000000..70e599e
--- /dev/null
+++ b/ButtonDemo/settings/v2/packages/device.json
@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.1"
+}
diff --git a/ButtonDemo/settings/v2/packages/engine.json b/ButtonDemo/settings/v2/packages/engine.json
new file mode 100644
index 0000000..2e889fa
--- /dev/null
+++ b/ButtonDemo/settings/v2/packages/engine.json
@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.5"
+}
diff --git a/ButtonDemo/settings/v2/packages/program.json b/ButtonDemo/settings/v2/packages/program.json
new file mode 100644
index 0000000..4d87e97
--- /dev/null
+++ b/ButtonDemo/settings/v2/packages/program.json
@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.0"
+}
diff --git a/ButtonDemo/settings/v2/packages/project.json b/ButtonDemo/settings/v2/packages/project.json
new file mode 100644
index 0000000..70e599e
--- /dev/null
+++ b/ButtonDemo/settings/v2/packages/project.json
@@ -0,0 +1,3 @@
+{
+  "__version__": "1.0.1"
+}
diff --git a/ButtonDemo/tsconfig.json b/ButtonDemo/tsconfig.json
new file mode 100644
index 0000000..faff299
--- /dev/null
+++ b/ButtonDemo/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  /* Base configuration. Do not edit this field. */
+  "extends": "./temp/tsconfig.cocos.json" 
+
+  /* Add your custom configuration here. */
+}
diff --git a/CreatorUtils/UI/ButtonUtil.ts b/CreatorUtils/UI/ButtonUtil.ts
new file mode 100644
index 0000000..4e882cf
--- /dev/null
+++ b/CreatorUtils/UI/ButtonUtil.ts
@@ -0,0 +1,59 @@
+import { Button, Component, EventHandler, Node } from "cc";
+
+/**
+ * 对button操作的简单封装
+ * 版本为ccc 3.1.x
+ */
+export default class ButtonUtil {
+
+    /**
+     * 
+     * @param button 组件
+     * @param node 事件所在脚本的节点
+     * @param component 事件所在脚本
+     * @param callback 事件名字
+     * @param customData 数据
+     */
+    public static AddClick(button: Button, node: Node, component: string, callback: string, customData?: any) {
+        let clickEventHandler = new EventHandler();
+        clickEventHandler.target = node;
+        clickEventHandler.component = component;
+        clickEventHandler.handler = callback;
+        clickEventHandler.customEventData = customData || null;
+
+        button.clickEvents.push(clickEventHandler);
+
+    }
+
+    /**
+     * 
+     * @param node 添加组件的节点
+     * @param zoomScale 绽放因子 默认0.95
+     * @returns 
+     */
+    public static AddScaleButton(node: Node, zoomScale: number = 0.95): Button {
+        let button = node.addComponent(Button);
+        button.target = node;
+        button.transition = Button.Transition.COLOR;
+        button.duration = 0.1;
+        button.zoomScale = zoomScale;
+        return button;
+    }
+
+    /**
+     * 
+     * @param button 组件
+     * @param state 是否禁用状态 默认为false
+     */
+    public static Interactable(button: Button | Node, state: boolean) {
+        if (button instanceof Button) {
+            button.interactable = state;
+        } else if (button instanceof Node) {
+            button = button.getComponent(Button)!;
+            button && (button.interactable = state);
+        }
+    }
+
+
+
+}
\ No newline at end of file