{
  "id": "MuhammadHasann_average-ape-81",
  "name": "average-ape-81",
  "category": "buttons",
  "author": "MuhammadHasann",
  "description": "average-ape-81 组件 (button, animation, interactive)",
  "tags": [
    "button",
    "animation",
    "interactive"
  ],
  "original": {
    "html": "<button>\n  <div class=\"icon\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" version=\"1.1\" style=\"shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd\" viewBox=\"0 0 19.18 20.17\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><defs></defs><g id=\"Layer_x0020_1\"><metadata id=\"CorelCorpID_0Corel-Layer\"></metadata><g id=\"_2478177736128\"><path class=\"fil0\" d=\"M9.59 20.17c-2.99,-1.91 -4.97,-2.73 -7.95,-3.34 -0.44,-3.75 -0.99,-6.77 -1.64,-8.96 4.01,0.22 7.06,0.94 9.59,3.14 0,4.34 0,4.81 0,9.16z\"></path><path class=\"fil1\" d=\"M9.59 20.17c2.99,-1.91 4.97,-2.73 7.95,-3.34 0.44,-3.75 0.99,-6.77 1.64,-8.96 -4.01,0.22 -7.06,0.94 -9.59,3.14 0,4.34 0,4.81 0,9.16z\"></path><path class=\"fil2\" d=\"M9.66 10.55c0,0 2.92,-3.03 8.68,-3.05 0,0 0.01,-0.55 0.29,-1 0,0 -6.73,0.43 -8.97,4.05zm-0.13 0c0,0 -2.92,-3.03 -8.68,-3.05 0,0 -0.01,-0.55 -0.29,-1 0,0 6.73,0.43 8.97,4.05z\"></path><path class=\"fil0\" d=\"M9.33 0.92l0.88 0.15 0.42 -0.8 0.12 0.89 0.88 0.15 -0.81 0.4 0.12 0.89 -0.62 -0.65 -0.81 0.4 0.42 -0.8 -0.62 -0.64zm2.06 3.05c0.1,0 0.18,0.08 0.18,0.18 0,0.1 -0.08,0.18 -0.18,0.18 -0.1,0 -0.18,-0.08 -0.18,-0.18 0,-0.1 0.08,-0.18 0.18,-0.18zm-7.43 -0.4c0.12,0 0.22,0.05 0.3,0.12 0.08,0.08 0.12,0.18 0.12,0.3 0,0.12 -0.05,0.22 -0.12,0.3 -0.08,0.08 -0.18,0.12 -0.3,0.12 -0.12,0 -0.22,-0.05 -0.3,-0.12 -0.08,-0.08 -0.12,-0.18 -0.12,-0.3 0,-0.12 0.05,-0.22 0.12,-0.3 0.08,-0.08 0.18,-0.12 0.3,-0.12zm0.25 0.18c-0.06,-0.06 -0.15,-0.1 -0.25,-0.1 -0.1,0 -0.18,0.04 -0.25,0.1 -0.06,0.06 -0.1,0.15 -0.1,0.25 0,0.1 0.04,0.18 0.1,0.25 0.06,0.06 0.15,0.1 0.25,0.1 0.1,0 0.18,-0.04 0.25,-0.1 0.06,-0.06 0.1,-0.15 0.1,-0.25 0,-0.1 -0.04,-0.18 -0.1,-0.25zm3.36 -0.16c0.23,0 0.43,0.09 0.58,0.24 0.15,0.15 0.24,0.35 0.24,0.58 0,0.23 -0.09,0.43 -0.24,0.58 -0.15,0.15 -0.35,0.24 -0.58,0.24 -0.23,0 -0.43,-0.09 -0.58,-0.24 -0.15,-0.15 -0.24,-0.35 -0.24,-0.58 0,-0.23 0.09,-0.43 0.24,-0.58 0.15,-0.15 0.35,-0.24 0.58,-0.24zm0.47 0.35c-0.12,-0.12 -0.29,-0.2 -0.47,-0.2 -0.18,0 -0.35,0.07 -0.47,0.2 -0.12,0.12 -0.2,0.29 -0.2,0.47 0,0.18 0.07,0.35 0.2,0.47 0.12,0.12 0.29,0.2 0.47,0.2 0.18,0 0.35,-0.07 0.47,-0.2 0.12,-0.12 0.2,-0.29 0.2,-0.47 0,-0.18 -0.07,-0.35 -0.2,-0.47z\"></path><path class=\"fil3\" d=\"M6.75 1.49c0.18,0 0.33,0.15 0.33,0.33 0,0.18 -0.15,0.33 -0.33,0.33 -0.18,0 -0.33,-0.15 -0.33,-0.33 0,-0.18 0.15,-0.33 0.33,-0.33zm2.37 4.79l0.45 0.52 0.64 -0.27 -0.37 0.58 0.45 0.52 -0.67 -0.16 -0.36 0.59 -0.05 -0.68 -0.67 -0.16 0.64 -0.26 -0.05 -0.68zm6.92 -5.91l0.9 0.38 0.64 -0.75 -0.09 0.98 0.9 0.37 -0.95 0.23 -0.09 0.98 -0.5 -0.84 -0.95 0.23 0.65 -0.74 -0.5 -0.83z\"></path></g></g></svg>\n  </div>\n</button>",
    "css": "/* From Uiverse.io by MuhammadHasann - Tags: button */\nbutton {\n  position: relative;\n  padding: 13px 35px;\n  background: transparent;\n  font-size: 17px;\n  font-weight: 900;\n  border: none;\n  transition: all .3s ease-in-out;\n}\n\nbutton::after {\n  content: \"Read More\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 155px;\n  height: 47px;\n  background-color: #ffffff;\n  font-size: 17px;\n  font-weight: 900;\n  line-height: 47px;\n  color: #181818;\n  border: 2px solid #181818;\n  border-radius: 50px;\n  transition: all .3s ease-in-out;\n  z-index: 2;\n}\n\nbutton:hover::after {\n  width: 165px;\n  height: 50px;\n  font-size: 18px;\n  line-height: 50px;\n}\n\nbutton:focus::after {\n  content: \"Read less\";\n  top: 200%;\n  width: 155px;\n  height: 47px;\n  font-size: 17px;\n  line-height: 47px;\n  z-index: -2;\n  pointer-events: none;\n}\n\n.icon {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n  width: 20px;\n  height: auto;\n  z-index: -3;\n  transition: all .3s ease-in-out;\n}\n\nbutton:focus .icon {\n  top: -250%;\n  width: 75px;\n  height: auto;\n}\n\n.fil0 {\n  fill: #333333\n}\n\n.fil2 {\n  fill: #222222\n}\n\n.fil1 {\n  fill: #181818\n}\n\n.fil3 {\n  fill: #181818\n}",
    "file_path": "/mnt/persist/workspace/Buttons/MuhammadHasann_average-ape-81.html"
  },
  "uniapp": {
    "template": "<button></button>\n  <view class=\"icon\"></view>\n    <view xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" version=\"1.1\" style=\"shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd\" viewBox=\"0 0 19.18 20.17\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><defs></defs><g id=\"Layer_x0020_1\"><metadata id=\"CorelCorpID_0Corel-Layer\"></metadata><g id=\"_2478177736128\"><path class=\"fil0\" d=\"M9.59 20.17c-2.99,-1.91 -4.97,-2.73 -7.95,-3.34 -0.44,-3.75 -0.99,-6.77 -1.64,-8.96 4.01,0.22 7.06,0.94 9.59,3.14 0,4.34 0,4.81 0,9.16z\"></path><path class=\"fil1\" d=\"M9.59 20.17c2.99,-1.91 4.97,-2.73 7.95,-3.34 0.44,-3.75 0.99,-6.77 1.64,-8.96 -4.01,0.22 -7.06,0.94 -9.59,3.14 0,4.34 0,4.81 0,9.16z\"></path><path class=\"fil2\" d=\"M9.66 10.55c0,0 2.92,-3.03 8.68,-3.05 0,0 0.01,-0.55 0.29,-1 0,0 -6.73,0.43 -8.97,4.05zm-0.13 0c0,0 -2.92,-3.03 -8.68,-3.05 0,0 -0.01,-0.55 -0.29,-1 0,0 6.73,0.43 8.97,4.05z\"></path><path class=\"fil0\" d=\"M9.33 0.92l0.88 0.15 0.42 -0.8 0.12 0.89 0.88 0.15 -0.81 0.4 0.12 0.89 -0.62 -0.65 -0.81 0.4 0.42 -0.8 -0.62 -0.64zm2.06 3.05c0.1,0 0.18,0.08 0.18,0.18 0,0.1 -0.08,0.18 -0.18,0.18 -0.1,0 -0.18,-0.08 -0.18,-0.18 0,-0.1 0.08,-0.18 0.18,-0.18zm-7.43 -0.4c0.12,0 0.22,0.05 0.3,0.12 0.08,0.08 0.12,0.18 0.12,0.3 0,0.12 -0.05,0.22 -0.12,0.3 -0.08,0.08 -0.18,0.12 -0.3,0.12 -0.12,0 -0.22,-0.05 -0.3,-0.12 -0.08,-0.08 -0.12,-0.18 -0.12,-0.3 0,-0.12 0.05,-0.22 0.12,-0.3 0.08,-0.08 0.18,-0.12 0.3,-0.12zm0.25 0.18c-0.06,-0.06 -0.15,-0.1 -0.25,-0.1 -0.1,0 -0.18,0.04 -0.25,0.1 -0.06,0.06 -0.1,0.15 -0.1,0.25 0,0.1 0.04,0.18 0.1,0.25 0.06,0.06 0.15,0.1 0.25,0.1 0.1,0 0.18,-0.04 0.25,-0.1 0.06,-0.06 0.1,-0.15 0.1,-0.25 0,-0.1 -0.04,-0.18 -0.1,-0.25zm3.36 -0.16c0.23,0 0.43,0.09 0.58,0.24 0.15,0.15 0.24,0.35 0.24,0.58 0,0.23 -0.09,0.43 -0.24,0.58 -0.15,0.15 -0.35,0.24 -0.58,0.24 -0.23,0 -0.43,-0.09 -0.58,-0.24 -0.15,-0.15 -0.24,-0.35 -0.24,-0.58 0,-0.23 0.09,-0.43 0.24,-0.58 0.15,-0.15 0.35,-0.24 0.58,-0.24zm0.47 0.35c-0.12,-0.12 -0.29,-0.2 -0.47,-0.2 -0.18,0 -0.35,0.07 -0.47,0.2 -0.12,0.12 -0.2,0.29 -0.2,0.47 0,0.18 0.07,0.35 0.2,0.47 0.12,0.12 0.29,0.2 0.47,0.2 0.18,0 0.35,-0.07 0.47,-0.2 0.12,-0.12 0.2,-0.29 0.2,-0.47 0,-0.18 -0.07,-0.35 -0.2,-0.47z\"></path><path class=\"fil3\" d=\"M6.75 1.49c0.18,0 0.33,0.15 0.33,0.33 0,0.18 -0.15,0.33 -0.33,0.33 -0.18,0 -0.33,-0.15 -0.33,-0.33 0,-0.18 0.15,-0.33 0.33,-0.33zm2.37 4.79l0.45 0.52 0.64 -0.27 -0.37 0.58 0.45 0.52 -0.67 -0.16 -0.36 0.59 -0.05 -0.68 -0.67 -0.16 0.64 -0.26 -0.05 -0.68zm6.92 -5.91l0.9 0.38 0.64 -0.75 -0.09 0.98 0.9 0.37 -0.95 0.23 -0.09 0.98 -0.5 -0.84 -0.95 0.23 0.65 -0.74 -0.5 -0.83z\"></path></g></g></view>\n  </div>\n</button>",
    "script": "export default {\n  name: 'GalaxyAverageApe81',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by MuhammadHasann - Tags: button */\nbutton {\n  position: relative;\n  padding: 26rpx 70rpx;\n  background: transparent;\n  font-size: 34rpx;\n  font-weight: 900;\n  border: none;\n  transition: all .3s ease-in-out;\n}\n\nbutton::after {\n  content: \"Read More\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 310rpx;\n  height: 94rpx;\n  background-color: #ffffff;\n  font-size: 34rpx;\n  font-weight: 900;\n  line-height: 94rpx;\n  color: #181818;\n  border: 4rpx solid #181818;\n  border-radius: 100rpx;\n  transition: all .3s ease-in-out;\n  z-index: 2;\n}\n\nbutton:hover::after {\n  width: 330rpx;\n  height: 100rpx;\n  font-size: 36rpx;\n  line-height: 100rpx;\n}\n\nbutton:focus::after {\n  content: \"Read less\";\n  top: 200%;\n  width: 310rpx;\n  height: 94rpx;\n  font-size: 34rpx;\n  line-height: 94rpx;\n  z-index: -2;\n  pointer-events: none;\n}\n\n.icon {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n  width: 40rpx;\n  height: auto;\n  z-index: -3;\n  transition: all .3s ease-in-out;\n}\n\nbutton:focus .icon {\n  top: -250%;\n  width: 150rpx;\n  height: auto;\n}\n\n.fil0 {\n  fill: #333333\n}\n\n.fil2 {\n  fill: #222222\n}\n\n.fil1 {\n  fill: #181818\n}\n\n.fil3 {\n  fill: #181818\n}\n",
    "component_name": "GalaxyAverageApe81"
  },
  "platforms": {
    "h5": true,
    "mp-weixin": true,
    "mp-alipay": true,
    "mp-baidu": true,
    "mp-toutiao": true,
    "app-plus": true
  },
  "props": [
    {
      "name": "disabled",
      "type": "Boolean",
      "default": false,
      "required": false,
      "description": "是否禁用"
    },
    {
      "name": "text",
      "type": "String",
      "default": "按钮",
      "required": false,
      "description": "按钮文字"
    },
    {
      "name": "type",
      "type": "String",
      "default": "primary",
      "required": false,
      "description": "按钮类型"
    }
  ],
  "events": [
    {
      "name": "click",
      "description": "点击事件",
      "parameters": [
        "event"
      ]
    }
  ],
  "slots": [
    {
      "name": "",
      "description": "",
      "props": []
    }
  ],
  "compatibility": {
    "h5": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-weixin": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "medium",
    "bundle_size": 3897,
    "render_cost": "medium",
    "memory_usage": "medium"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:34.011Z",
  "updated_at": "2025-07-31T07:55:34.011Z"
}