{
  "id": "vishal2231179_giant-frog-58",
  "name": "giant-frog-58",
  "category": "buttons",
  "author": "vishal2231179",
  "description": "giant-frog-58 组件 (button, light&dark, hover effect, hoverme, hover button, 3d button, button hover effect, generate button, gradient, interactive)",
  "tags": [
    "button",
    "light&dark",
    "hover effect",
    "hoverme",
    "hover button",
    "3d button",
    "button hover effect",
    "generate button",
    "gradient",
    "interactive"
  ],
  "original": {
    "html": "<button class=\"button\" type=\"submit\">\n  <svg viewBox=\"0 0 576 512\" class=\"svg\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z\" fill=\"#74C0FC\"></path>\n  </svg>\n  Hover Me\n</button>",
    "css": "/* From Uiverse.io by vishal2231179  - Tags: button, light&dark, hover effect, hoverme, hover button, 3d button, button hover effect , generate button */\n.button {\n  cursor: pointer;\n  /* padding: 15px; */\n  padding: 20px;\n  width: 190px;\n  /* background-color: rgb(43, 43, 43); */\n  border-radius: 30px;\n  font-weight: 600;\n  font-size: 20px;\n  border-style: double;\n  border-color: rgba(74, 61, 255, 0.753);\n\n  color: rgba(126, 185, 236, 0.968);\n  background-image: linear-gradient(to right, rgb(14, 15, 58), rgb(49, 3, 118));\n  /* border-color: rgb(67, 67, 67); */\n  transition: 300ms;\n}\n.button:hover {\n  border-color: rgb(100, 43, 215);\n  border-top-right-radius: 5%;\n  border-bottom-left-radius: 5%;\n\n  box-shadow: 0px 5px 10px 1px rgb(0, 0, 0);\n  font-size: 22px;\n  transition: 400px;\n}\n.svg {\n  height: 20px;\n}",
    "file_path": "/mnt/persist/workspace/Buttons/vishal2231179_giant-frog-58.html"
  },
  "uniapp": {
    "template": "<button class=\"button\" type=\"submit\"></button>\n  <view viewBox=\"0 0 576 512\" class=\"svg\" xmlns=\"http://www.w3.org/2000/svg\"></view>\n    <path d=\"M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z\" fill=\"#74C0FC\"></path>\n  </svg>\n  Hover Me\n</button>",
    "script": "export default {\n  name: 'GalaxyGiantFrog58',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by vishal2231179  - Tags: button, light&dark, hover effect, hoverme, hover button, 3d button, button hover effect , generate button */\n.button {\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  /* padding: 30rpx; */\n  padding: 40rpx;\n  width: 380rpx;\n  /* background-color: rgb(43, 43, 43); */\n  border-radius: 60rpx;\n  font-weight: 600;\n  font-size: 40rpx;\n  border-style: double;\n  border-color: rgba(74, 61, 255, 0.753);\n\n  color: rgba(126, 185, 236, 0.968);\n  background-image: linear-gradient(to right, rgb(14, 15, 58), rgb(49, 3, 118));\n  /* border-color: rgb(67, 67, 67); */\n  transition: 300ms;\n}\n.button:hover {\n  border-color: rgb(100, 43, 215);\n  border-top-right-radius: 5%;\n  border-bottom-left-radius: 5%;\n\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0rpx 10rpx 20rpx 2rpx rgb(0, 0, 0);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  font-size: 44rpx;\n  transition: 800rpx;\n}\n.svg {\n  height: 40rpx;\n}\n\n",
    "component_name": "GalaxyGiantFrog58"
  },
  "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 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "low",
    "bundle_size": 1904,
    "render_cost": "low",
    "memory_usage": "low"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:38.335Z",
  "updated_at": "2025-07-31T07:55:38.335Z"
}