{
  "id": "Spacious74_terrible-mole-30",
  "name": "terrible-mole-30",
  "category": "buttons",
  "author": "Spacious74",
  "description": "terrible-mole-30 组件 (flashy, social, button, btn, 3d button, gradient)",
  "tags": [
    "flashy",
    "social",
    "button",
    "btn",
    "3d button",
    "gradient"
  ],
  "original": {
    "html": "<button class=\"button\">\n  <div class=\"inner\">\n    <div class=\"svgs\">\n      <svg viewBox=\"0 0 256 256\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-l\">\n        <path d=\"M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15\" fill=\"currentColor\"></path>\n      </svg>\n      <svg viewBox=\"0 0 256 256\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-s\">\n        <path d=\"M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15\" fill=\"currentColor\"></path>\n      </svg>\n    </div>\n    Generate\n  </div>\n</button>",
    "css": "/* From Uiverse.io by Spacious74  - Tags: flashy, social, button, btn, 3d button */\n.button {\n  cursor: pointer;\n  border: solid 4px #161616;\n  border-top: none;\n  border-radius: 20px;\n  position: relative;\n  box-shadow: 0px 4px 10px #00000062, 0px 10px 40px -10px #000000a6,\n    0px 12px 45px -15px #00000071;\n  transition: all 0.3s ease;\n}\n.inner {\n  padding: 12px 30px;\n  font-size: 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  border-bottom: solid 3px #374e72;\n  border-radius: 16px;\n  background: linear-gradient(180deg, #5771a5, #000);\n  color: #fff;\n  text-shadow: 1px 1px #000, 0 0 9px #fff;\n}\n.svgs {\n  position: relative;\n  margin-top: 9px;\n  z-index: 10;\n}\n.svgs > * {\n  filter: drop-shadow(0 0 6px #fff) drop-shadow(1px 1px 0px #000);\n}\n.svgs .svg-s {\n  position: absolute;\n  font-size: 0.8rem;\n  left: 20px;\n  top: -4px;\n}\n.button:active {\n  box-shadow: none;\n}",
    "file_path": "/mnt/persist/workspace/Buttons/Spacious74_terrible-mole-30.html"
  },
  "uniapp": {
    "template": "<button class=\"button\"></button>\n  <view class=\"inner\"></view>\n    <view class=\"svgs\"></view>\n      <view viewBox=\"0 0 256 256\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-l\"></view>\n        <path d=\"M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15\" fill=\"currentColor\"></path>\n      </svg>\n      <view viewBox=\"0 0 256 256\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-s\"></view>\n        <path d=\"M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0l-23.06-63.44L26.5 143a16 16 0 0 1 0-30l63.44-23.06L113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113a15.79 15.79 0 0 1 10.5 15\" fill=\"currentColor\"></path>\n      </svg>\n    </div>\n    Generate\n  </div>\n</button>",
    "script": "export default {\n  name: 'GalaxyTerribleMole30',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by Spacious74  - Tags: flashy, social, button, btn, 3d button */\n.button {\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  border: solid 8rpx #161616;\n  border-top: none;\n  border-radius: 40rpx;\n  position: relative;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0rpx 8rpx 20rpx #00000062, 0rpx 20rpx 80rpx -20rpx #000000a6,\n    0rpx 24rpx 90rpx -30rpx #00000071;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  transition: all 0.3s ease;\n}\n.inner {\n  padding: 24rpx 60rpx;\n  font-size: 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 24rpx;\n  font-weight: 600;\n  letter-spacing: 2rpx;\n  border-bottom: solid 6rpx #374e72;\n  border-radius: 32rpx;\n  background: linear-gradient(180deg, #5771a5, #000);\n  color: #fff;\n  /* #ifdef H5 */\n  text-shadow: 2rpx 2rpx #000, 0 0 18rpx #fff;\n  /* #endif */\n}\n.svgs {\n  position: relative;\n  margin-top: 18rpx;\n  z-index: 10;\n}\n.svgs > * {\n  \n}\n.svgs .svg-s {\n  position: absolute;\n  font-size: 0.8rem;\n  left: 40rpx;\n  top: -8rpx;\n}\n.button:active {\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: none;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n}\n\n",
    "component_name": "GalaxyTerribleMole30"
  },
  "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 属性",
        "不支持 text-shadow 属性",
        "不支持 filter 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 text-shadow 属性",
        "不支持 filter 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "low",
    "bundle_size": 1790,
    "render_cost": "low",
    "memory_usage": "low"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:34.843Z",
  "updated_at": "2025-07-31T07:55:34.843Z"
}