{
  "id": "nhfiz_unlucky-pug-80",
  "name": "unlucky-pug-80",
  "category": "buttons",
  "author": "nhfiz",
  "description": "unlucky-pug-80 组件 (button, animation, interactive)",
  "tags": [
    "button",
    "animation",
    "interactive"
  ],
  "original": {
    "html": "<button>\n <span class=\"icon\">\n    \n<svg height=\"303.09363\" width=\"187.41829\" version=\"1.1\">\n  <path id=\"path4\" stroke-linecap=\"round\" style=\"stroke:none;stroke-width:2.81;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none\" d=\"m 105.04479,7.9451197 c -0.54247,-0.518571 -1.09286,-1.029222 -1.64524,-1.54186 -0.61595,-0.572255 -1.22596,-1.146482 -1.85384,-1.710782 -1.25775,-1.134567 -2.537358,-2.259184 -3.844788,-3.36394 -2.09427,-1.77237697 -5.16413,-1.77038997 -7.26039,0 -1.30742,1.104756 -2.58107,2.227394 -3.83882,3.35798 -0.63782,0.574234 -1.25577,1.156416 -1.87769,1.734625 -0.53847,0.502703 -1.0829,1.003419 -1.61143,1.512084 -0.88818,0.848436 -1.75648,1.70482 -2.61684,2.5651783 -0.14306,0.143062 -0.28811,0.288111 -0.42919,0.43316 -17.060123,17.22703 -28.588524,37.172235 -35.801225,61.735159 -0.125179,0.435146 -0.260293,0.860358 -0.387459,1.293517 -0.04371,0.154984 -0.09339,0.300033 -0.137101,0.455017 -0.0099,0.03377 -0.0079,0.07153 -0.01788,0.105302 -5.766187,20.286964 -8.524101,43.53849 -8.524101,70.45796 0,3.05993 0.05365,6.10596 0.13114,9.14403 l -24.167515,28.14543 c -0.707361,0.82261 -1.160391,1.83199 -1.3074264,2.90495 l -9.80369097,72.24621 c -0.311955,2.29892 0.818631,4.55414 2.84931497,5.67479 2.028696,1.12263 4.538239,0.88221 6.320552,-0.60206 L 51.189952,227.47351 h 24.37615 c -3.33215,5.3072 -5.31316,12.12847 -5.31514,19.66505 0.002,4.51638 0.72127,8.8599 2.15983,12.95305 1.93929,5.40854 7.59023,18.67752 13.573,32.72739 l 2.91687,6.85505 c 0.88221,2.07439 2.91687,3.42156 5.17208,3.41957 1.52003,0.002 2.94072,-0.61199 3.97593,-1.6472 0.49873,-0.49873 0.90804,-1.09879 1.19615,-1.77635 l 3.020198,-7.10143 c 5.93309,-13.93661 11.53635,-27.10227 13.48358,-32.51875 1.42267,-4.06137 2.14394,-8.40687 2.14394,-12.91729 0,-7.53459 -1.983,-14.35387 -5.31515,-19.66107 h 23.65289 l 41.9668,35.01637 c 1.78032,1.48626 4.29185,1.72469 6.32055,0.60205 0.46892,-0.2583 0.88817,-0.5782 1.25378,-0.94381 1.22,-1.22 1.83596,-2.96058 1.59553,-4.73097 l -9.80569,-72.24027 c -0.14704,-1.07297 -0.60007,-2.08235 -1.30743,-2.90495 l -23.45419,-27.31289 c 0.0914,-3.31427 0.14107,-6.63847 0.14306,-9.97857 0,-26.93934 -2.75792,-50.202781 -8.53006,-70.499678 -0.006,-0.02183 -0.006,-0.0457 -0.012,-0.06753 -0.0278,-0.09936 -0.0596,-0.190728 -0.0874,-0.290098 -0.26625,-0.929902 -0.5484,-1.843908 -0.83055,-2.761888 -7.23257,-23.950938 -18.64573,-43.486827 -35.37602,-60.391968 -0.16279,-0.16704 -0.32573,-0.329972 -0.49064,-0.49489 -0.84022,-0.8487053 -1.69701,-1.6927643 -2.57114,-2.5274333 z m 12.504,114.1176503 c 0,6.2669 -2.44,12.16423 -6.87492,16.59915 -4.43293,4.43293 -10.32827,6.87491 -16.599138,6.87491 -12.94511,-0.002 -23.47407,-10.53094 -23.47605,-23.47605 v 0 c 0.004,-12.94709 10.53889,-23.47406 23.47406,-23.47406 6.268888,-0.002 12.166218,2.43801 16.601138,6.87293 4.43491,4.43492 6.8769,10.33025 6.87491,16.60312 z\"></path>\n</svg>\n\n   </span>\n<span class=\"text\">\nLaunch\n</span>   \n<span class=\"launch\">\n</span>   \n</button>",
    "css": "/* From Uiverse.io by nhfiz - Tags: button */\nbutton {\n  padding: 15px 30px 15px 50px;\n  background: #181c35;\n  border-radius: 30px;\n  display: flex;\n  position: relative;\n  color: #fff;\n  font-weight: 400;\n  overflow: hidden;\n  transition: all ease-in-out .5s;\n  border: #ffffff56 solid 1px;\n  box-shadow: #51eafd 0px 0px 50px -15px;\n}\n\nbutton:before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: -90%;\n  left: -90%;\n  filter: blur(20px);\n  background: #a11ee3;\n}\n\nbutton:after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  bottom: -90%;\n  right: -90%;\n  filter: blur(20px);\n  background: #51eafd;\n}\n\nbutton .icon {\n  transform: scale(0.07);\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  left: 14px;\n  top: 2px;\n  transition: all ease-in-out .5s;\n  z-index: 9;\n  rotate: 45deg\n}\n\nbutton .icon path {\n  fill: #fff;\n}\n\nbutton .launch {\n  background: fff;\n  background: #fff;\n  width: 300px;\n  height: 300px;\n  rotate: 45deg;\n  position: absolute;\n  left: -9px;\n  top: 550%;\n  z-index: 0;\n  transform: translateX(-56%);\n  transition: all ease-in-out 1s;\n}\n\nbutton .text {\n  z-index: 9;\n  transition: all ease-in-out .3s;\n}\n\nbutton:hover .icon {\n  transform: scale(0.07);\n  animation: shake_341 2s infinite;\n  top: 5px;\n  left: 8px;\n  rotate: 0deg;\n}\n\nbutton:active {\n  transform: scale(0.7);\n}\n\nbutton:hover {\n  box-shadow: 0px 0px 0px 10px #00000017;\n}\n\nbutton:focus {\n  color: #464646;\n}\n\nbutton:focus .icon {\n  transform: scale(0.07);\n  animation: launch_341 2s alternate;\n}\n\nbutton:focus .icon path {\n  animation: fill_341 2s linear;\n  animation-fill-mode: forwards;\n}\n\nbutton:focus .launch {\n  top: -90%;\n}\n\n@keyframes shake_341 {\n  10%, 90% {\n    transform: scale(0.07) translate3d(-6px, 0, 0);\n  }\n\n  20%, 80% {\n    transform: scale(0.07)  translate3d(7px, 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: scale(0.07)  translate3d(-9px, 0, 0);\n  }\n\n  40%, 60% {\n    transform: scale(0.07)  translate3d(9px, 0, 0);\n  }\n}\n\n@keyframes launch_341 {\n  0% {\n    top: 0px;\n    opacity: 1;\n  }\n\n  20% {\n    top: -100%;\n    opacity: 1;\n  }\n\n  20.5% {\n    opacity: 0;\n  }\n\n  24% {\n    opacity: 0;\n    top: 100%;\n  }\n\n  25% {\n    opacity: 1;\n  }\n\n  100% {\n    top: 6px;\n  }\n}\n\n@keyframes fill_341 {\n  0% {\n    fill: #fff;\n  }\n\n  20% {\n    fill: #fff;\n  }\n\n  20.5% {\n    opacity: 0;\n  }\n\n  100% {\n    fill: #464646;\n  }\n}",
    "file_path": "/mnt/persist/workspace/Buttons/nhfiz_unlucky-pug-80.html"
  },
  "uniapp": {
    "template": "<button></button>\n <text class=\"icon\"></text>\n    \n<view height=\"303.09363\" width=\"187.41829\" version=\"1.1\"></view>\n  <path id=\"path4\" stroke-linecap=\"round\" style=\"stroke:none;stroke-width:2.81;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none\" d=\"m 105.04479,7.9451197 c -0.54247,-0.518571 -1.09286,-1.029222 -1.64524,-1.54186 -0.61595,-0.572255 -1.22596,-1.146482 -1.85384,-1.710782 -1.25775,-1.134567 -2.537358,-2.259184 -3.844788,-3.36394 -2.09427,-1.77237697 -5.16413,-1.77038997 -7.26039,0 -1.30742,1.104756 -2.58107,2.227394 -3.83882,3.35798 -0.63782,0.574234 -1.25577,1.156416 -1.87769,1.734625 -0.53847,0.502703 -1.0829,1.003419 -1.61143,1.512084 -0.88818,0.848436 -1.75648,1.70482 -2.61684,2.5651783 -0.14306,0.143062 -0.28811,0.288111 -0.42919,0.43316 -17.060123,17.22703 -28.588524,37.172235 -35.801225,61.735159 -0.125179,0.435146 -0.260293,0.860358 -0.387459,1.293517 -0.04371,0.154984 -0.09339,0.300033 -0.137101,0.455017 -0.0099,0.03377 -0.0079,0.07153 -0.01788,0.105302 -5.766187,20.286964 -8.524101,43.53849 -8.524101,70.45796 0,3.05993 0.05365,6.10596 0.13114,9.14403 l -24.167515,28.14543 c -0.707361,0.82261 -1.160391,1.83199 -1.3074264,2.90495 l -9.80369097,72.24621 c -0.311955,2.29892 0.818631,4.55414 2.84931497,5.67479 2.028696,1.12263 4.538239,0.88221 6.320552,-0.60206 L 51.189952,227.47351 h 24.37615 c -3.33215,5.3072 -5.31316,12.12847 -5.31514,19.66505 0.002,4.51638 0.72127,8.8599 2.15983,12.95305 1.93929,5.40854 7.59023,18.67752 13.573,32.72739 l 2.91687,6.85505 c 0.88221,2.07439 2.91687,3.42156 5.17208,3.41957 1.52003,0.002 2.94072,-0.61199 3.97593,-1.6472 0.49873,-0.49873 0.90804,-1.09879 1.19615,-1.77635 l 3.020198,-7.10143 c 5.93309,-13.93661 11.53635,-27.10227 13.48358,-32.51875 1.42267,-4.06137 2.14394,-8.40687 2.14394,-12.91729 0,-7.53459 -1.983,-14.35387 -5.31515,-19.66107 h 23.65289 l 41.9668,35.01637 c 1.78032,1.48626 4.29185,1.72469 6.32055,0.60205 0.46892,-0.2583 0.88817,-0.5782 1.25378,-0.94381 1.22,-1.22 1.83596,-2.96058 1.59553,-4.73097 l -9.80569,-72.24027 c -0.14704,-1.07297 -0.60007,-2.08235 -1.30743,-2.90495 l -23.45419,-27.31289 c 0.0914,-3.31427 0.14107,-6.63847 0.14306,-9.97857 0,-26.93934 -2.75792,-50.202781 -8.53006,-70.499678 -0.006,-0.02183 -0.006,-0.0457 -0.012,-0.06753 -0.0278,-0.09936 -0.0596,-0.190728 -0.0874,-0.290098 -0.26625,-0.929902 -0.5484,-1.843908 -0.83055,-2.761888 -7.23257,-23.950938 -18.64573,-43.486827 -35.37602,-60.391968 -0.16279,-0.16704 -0.32573,-0.329972 -0.49064,-0.49489 -0.84022,-0.8487053 -1.69701,-1.6927643 -2.57114,-2.5274333 z m 12.504,114.1176503 c 0,6.2669 -2.44,12.16423 -6.87492,16.59915 -4.43293,4.43293 -10.32827,6.87491 -16.599138,6.87491 -12.94511,-0.002 -23.47407,-10.53094 -23.47605,-23.47605 v 0 c 0.004,-12.94709 10.53889,-23.47406 23.47406,-23.47406 6.268888,-0.002 12.166218,2.43801 16.601138,6.87293 4.43491,4.43492 6.8769,10.33025 6.87491,16.60312 z\"></path>\n</svg>\n\n   </span>\n<text class=\"text\"></text>\nLaunch\n</span>   \n<text class=\"launch\"></text>\n</span>   \n</button>",
    "script": "export default {\n  name: 'GalaxyUnluckyPug80',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by nhfiz - Tags: button */\nbutton {\n  padding: 30rpx 60rpx 30rpx 100rpx;\n  background: #181c35;\n  border-radius: 60rpx;\n  display: flex;\n  position: relative;\n  color: #fff;\n  font-weight: 400;\n  overflow: hidden;\n  transition: all ease-in-out .5s;\n  border: #ffffff56 solid 2rpx;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: #51eafd 0rpx 0rpx 100rpx -30rpx;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n}\n\nbutton:before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: -90%;\n  left: -90%;\n  \n  background: #a11ee3;\n}\n\nbutton:after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  bottom: -90%;\n  right: -90%;\n  \n  background: #51eafd;\n}\n\nbutton .icon {\n  transform: scale(0.07);\n  width: 40rpx;\n  height: 40rpx;\n  position: absolute;\n  left: 28rpx;\n  top: 4rpx;\n  transition: all ease-in-out .5s;\n  z-index: 9;\n  rotate: 45deg\n}\n\nbutton .icon path {\n  fill: #fff;\n}\n\nbutton .launch {\n  background: fff;\n  background: #fff;\n  width: 600rpx;\n  height: 600rpx;\n  rotate: 45deg;\n  position: absolute;\n  left: -18rpx;\n  top: 550%;\n  z-index: 0;\n  transform: translateX(-56%);\n  transition: all ease-in-out 1s;\n}\n\nbutton .text {\n  z-index: 9;\n  transition: all ease-in-out .3s;\n}\n\nbutton:hover .icon {\n  transform: scale(0.07);\n  animation: shake_341 2s infinite;\n  top: 10rpx;\n  left: 16rpx;\n  rotate: 0deg;\n}\n\nbutton:active {\n  transform: scale(0.7);\n}\n\nbutton:hover {\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0rpx 0rpx 0rpx 20rpx #00000017;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n}\n\nbutton:focus {\n  color: #464646;\n}\n\nbutton:focus .icon {\n  transform: scale(0.07);\n  animation: launch_341 2s alternate;\n}\n\nbutton:focus .icon path {\n  animation: fill_341 2s linear;\n  animation-fill-mode: forwards;\n}\n\nbutton:focus .launch {\n  top: -90%;\n}\n\n@keyframes shake_341 {\n  10%, 90% {\n    transform: scale(0.07) translate3d(-12rpx, 0, 0);\n  }\n\n  20%, 80% {\n    transform: scale(0.07)  translate3d(14rpx, 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: scale(0.07)  translate3d(-18rpx, 0, 0);\n  }\n\n  40%, 60% {\n    transform: scale(0.07)  translate3d(18rpx, 0, 0);\n  }\n}\n\n@keyframes launch_341 {\n  0% {\n    top: 0rpx;\n    opacity: 1;\n  }\n\n  20% {\n    top: -100%;\n    opacity: 1;\n  }\n\n  20.5% {\n    opacity: 0;\n  }\n\n  24% {\n    opacity: 0;\n    top: 100%;\n  }\n\n  25% {\n    opacity: 1;\n  }\n\n  100% {\n    top: 12rpx;\n  }\n}\n\n@keyframes fill_341 {\n  0% {\n    fill: #fff;\n  }\n\n  20% {\n    fill: #fff;\n  }\n\n  20.5% {\n    opacity: 0;\n  }\n\n  100% {\n    fill: #464646;\n  }\n}\n",
    "component_name": "GalaxyUnluckyPug80"
  },
  "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 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 filter 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 5373,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:37.465Z",
  "updated_at": "2025-07-31T07:55:37.465Z"
}