{
  "id": "MRez321_tame-squid-31",
  "name": "tame-squid-31",
  "category": "buttons",
  "author": "MRez321",
  "description": "tame-squid-31 组件 (button, hover, animated, hover button, #button, button hover effect, animation, gradient, interactive)",
  "tags": [
    "button",
    "hover",
    "animated",
    "hover button",
    "#button",
    "button hover effect",
    "animation",
    "gradient",
    "interactive"
  ],
  "original": {
    "html": "<button class=\"button\">\n  <svg viewBox=\"0 0 48 48\" height=\"100\" width=\"100\" y=\"0px\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M39.175,10.016c1.687,0,2.131,1.276,1.632,4.272c-0.571,3.426-2.216,14.769-3.528,21.83 c-0.502,2.702-1.407,3.867-2.724,3.867c-0.724,0-1.572-0.352-2.546-0.995c-1.32-0.872-7.984-5.279-9.431-6.314 c-1.32-0.943-3.141-2.078-0.857-4.312c0.813-0.796,6.14-5.883,10.29-9.842c0.443-0.423,0.072-1.068-0.42-1.068 c-0.112,0-0.231,0.034-0.347,0.111c-5.594,3.71-13.351,8.859-14.338,9.53c-0.987,0.67-1.949,1.1-3.231,1.1 c-0.655,0-1.394-0.112-2.263-0.362c-1.943-0.558-3.84-1.223-4.579-1.477c-2.845-0.976-2.17-2.241,0.593-3.457 c11.078-4.873,25.413-10.815,27.392-11.637C36.746,10.461,38.178,10.016,39.175,10.016 M39.175,7.016L39.175,7.016 c-1.368,0-3.015,0.441-5.506,1.474L33.37,8.614C22.735,13.03,13.092,17.128,6.218,20.152c-1.074,0.473-4.341,1.91-4.214,4.916 c0.054,1.297,0.768,3.065,3.856,4.124l0.228,0.078c0.862,0.297,2.657,0.916,4.497,1.445c1.12,0.322,2.132,0.478,3.091,0.478 c1.664,0,2.953-0.475,3.961-1.028c-0.005,0.168-0.001,0.337,0.012,0.507c0.182,2.312,1.97,3.58,3.038,4.338l0.149,0.106 c1.577,1.128,8.714,5.843,9.522,6.376c1.521,1.004,2.894,1.491,4.199,1.491c2.052,0,4.703-1.096,5.673-6.318 c0.921-4.953,1.985-11.872,2.762-16.924c0.331-2.156,0.603-3.924,0.776-4.961c0.349-2.094,0.509-4.466-0.948-6.185 C42.208,7.875,41.08,7.016,39.175,7.016L39.175,7.016z\"></path>\n  </svg>\n\n  Send Message\n</button>",
    "css": "/* From Uiverse.io by MRez321  - Tags: button, hover, animated, hover button, #button, button hover effect  */\n.button {\n  position: relative;\n  z-index: 5;\n  isolation: isolate;\n  cursor: pointer;\n  transition: 0.4s;\n\n  width: fit-content;\n  height: 4.8rem;\n  padding: 1rem;\n  margin-inline: auto;\n  border: solid 3px;\n  border-color: #0000004d #0000004d #00000080 #00000080;\n  border-radius: 0.8rem;\n\n  font-family: cursive;\n  font-size: 1.4rem;\n  font-weight: 700;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n\n  animation: boxShadowRotation 2s linear infinite;\n}\n.button:hover,\n.button:active {\n  scale: 0.96;\n  border-color: #00000080 #00000080 #0000004d #0000004d;\n  padding: 2rem;\n  box-shadow: 0 0 4px 2px rgba(208, 212, 218, 0.979);\n  background: #fbfdfc;\n}\n\n.button::before,\n.button::after {\n  position: absolute;\n  content: \"\";\n  background: #f4f5f4;\n  transition: 0.4s;\n}\n.button::before {\n  z-index: -1;\n  inset: 0.3rem;\n  border-radius: 4rem;\n  box-shadow: inset 0 0 4px 2px rgba(208, 212, 218, 0.979);\n}\n.button:hover::before {\n  inset: 0.1rem;\n  z-index: -1;\n  margin-inline: auto;\n  border: solid 1px;\n  border-color: #00000080 #00000080 #0000004d #0000004d;\n  border-radius: 0.8rem;\n  animation: boxShadowRotation 2s linear infinite;\n  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);\n}\n.button::after {\n  background: none;\n  z-index: -2;\n  border-radius: 1rem;\n}\n.button:hover::after {\n  inset: -0.5rem;\n  border: solid 1px #00000080;\n  box-shadow: 0 0 10px 4px #a1c4fd;\n  background: #c2e9fb;\n}\n\n.button svg {\n  width: 2rem;\n  height: 2rem;\n  z-index: 10;\n}\n.button:hover svg {\n  animation: rotation 0.8s linear;\n  filter: drop-shadow(0 0 10px 10px rgb(170, 166, 166));\n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg) translate(0, 0) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4);\n  }\n  100% {\n    transform: rotate(360deg) translate(0, 0) scale(1);\n  }\n}\n@keyframes boxShadowRotation {\n  0% {\n    box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);\n  }\n  25% {\n    box-shadow: inset -10px 10px 20px rgba(29, 43, 83, 0.2);\n  }\n  50% {\n    box-shadow: inset -10px -10px 20px rgba(29, 43, 83, 0.2);\n  }\n  75% {\n    box-shadow: inset 10px -10px 20px rgba(29, 43, 83, 0.2);\n  }\n  100% {\n    box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2);\n  }\n}",
    "file_path": "/mnt/persist/workspace/Buttons/MRez321_tame-squid-31.html"
  },
  "uniapp": {
    "template": "<button class=\"button\"></button>\n  <view viewBox=\"0 0 48 48\" height=\"100\" width=\"100\" y=\"0px\" x=\"0px\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n    <path d=\"M39.175,10.016c1.687,0,2.131,1.276,1.632,4.272c-0.571,3.426-2.216,14.769-3.528,21.83 c-0.502,2.702-1.407,3.867-2.724,3.867c-0.724,0-1.572-0.352-2.546-0.995c-1.32-0.872-7.984-5.279-9.431-6.314 c-1.32-0.943-3.141-2.078-0.857-4.312c0.813-0.796,6.14-5.883,10.29-9.842c0.443-0.423,0.072-1.068-0.42-1.068 c-0.112,0-0.231,0.034-0.347,0.111c-5.594,3.71-13.351,8.859-14.338,9.53c-0.987,0.67-1.949,1.1-3.231,1.1 c-0.655,0-1.394-0.112-2.263-0.362c-1.943-0.558-3.84-1.223-4.579-1.477c-2.845-0.976-2.17-2.241,0.593-3.457 c11.078-4.873,25.413-10.815,27.392-11.637C36.746,10.461,38.178,10.016,39.175,10.016 M39.175,7.016L39.175,7.016 c-1.368,0-3.015,0.441-5.506,1.474L33.37,8.614C22.735,13.03,13.092,17.128,6.218,20.152c-1.074,0.473-4.341,1.91-4.214,4.916 c0.054,1.297,0.768,3.065,3.856,4.124l0.228,0.078c0.862,0.297,2.657,0.916,4.497,1.445c1.12,0.322,2.132,0.478,3.091,0.478 c1.664,0,2.953-0.475,3.961-1.028c-0.005,0.168-0.001,0.337,0.012,0.507c0.182,2.312,1.97,3.58,3.038,4.338l0.149,0.106 c1.577,1.128,8.714,5.843,9.522,6.376c1.521,1.004,2.894,1.491,4.199,1.491c2.052,0,4.703-1.096,5.673-6.318 c0.921-4.953,1.985-11.872,2.762-16.924c0.331-2.156,0.603-3.924,0.776-4.961c0.349-2.094,0.509-4.466-0.948-6.185 C42.208,7.875,41.08,7.016,39.175,7.016L39.175,7.016z\"></path>\n  </svg>\n\n  Send Message\n</button>",
    "script": "export default {\n  name: 'GalaxyTameSquid31',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by MRez321  - Tags: button, hover, animated, hover button, #button, button hover effect  */\n.button {\n  position: relative;\n  z-index: 5;\n  isolation: isolate;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  transition: 0.4s;\n\n  width: fit-content;\n  height: 4.8rem;\n  padding: 1rem;\n  margin-inline: auto;\n  border: solid 6rpx;\n  border-color: #0000004d #0000004d #00000080 #00000080;\n  border-radius: 0.8rem;\n\n  font-family: cursive;\n  font-size: 1.4rem;\n  font-weight: 700;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n\n  animation: boxShadowRotation 2s linear infinite;\n}\n.button:hover,\n.button:active {\n  scale: 0.96;\n  border-color: #00000080 #00000080 #0000004d #0000004d;\n  padding: 2rem;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 8rpx 4rpx rgba(208, 212, 218, 0.979);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  background: #fbfdfc;\n}\n\n.button::before,\n.button::after {\n  position: absolute;\n  content: \"\";\n  background: #f4f5f4;\n  transition: 0.4s;\n}\n.button::before {\n  z-index: -1;\n  inset: 0.3rem;\n  border-radius: 4rem;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: inset 0 0 8rpx 4rpx rgba(208, 212, 218, 0.979);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n}\n.button:hover::before {\n  inset: 0.1rem;\n  z-index: -1;\n  margin-inline: auto;\n  border: solid 2rpx;\n  border-color: #00000080 #00000080 #0000004d #0000004d;\n  border-radius: 0.8rem;\n  animation: boxShadowRotation 2s linear infinite;\n  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);\n}\n.button::after {\n  background: none;\n  z-index: -2;\n  border-radius: 1rem;\n}\n.button:hover::after {\n  inset: -0.5rem;\n  border: solid 2rpx #00000080;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 20rpx 8rpx #a1c4fd;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  background: #c2e9fb;\n}\n\n.button svg {\n  width: 2rem;\n  height: 2rem;\n  z-index: 10;\n}\n.button:hover svg {\n  animation: rotation 0.8s linear;\n  \n}\n\n@keyframes rotation {\n  0% {\n    transform: rotate(0deg) translate(0, 0) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4);\n  }\n  100% {\n    transform: rotate(360deg) translate(0, 0) scale(1);\n  }\n}\n@keyframes boxShadowRotation {\n  0% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: inset 20rpx 20rpx 40rpx rgba(29, 43, 83, 0.2);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n  25% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: inset -20rpx 20rpx 40rpx rgba(29, 43, 83, 0.2);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n  50% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: inset -20rpx -20rpx 40rpx rgba(29, 43, 83, 0.2);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n  75% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: inset 20rpx -20rpx 40rpx rgba(29, 43, 83, 0.2);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n  100% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: inset 20rpx 20rpx 40rpx rgba(29, 43, 83, 0.2);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n}\n\n",
    "component_name": "GalaxyTameSquid31"
  },
  "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": [
        "不支持 box-shadow 属性",
        "不支持 filter 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 filter 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 3823,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:33.881Z",
  "updated_at": "2025-07-31T07:55:33.881Z"
}