{
  "id": "zanina-yassine_shy-octopus-85",
  "name": "shy-octopus-85",
  "category": "buttons",
  "author": "zanina-yassine",
  "description": "shy-octopus-85 组件 (button, animation, gradient, interactive)",
  "tags": [
    "button",
    "animation",
    "gradient",
    "interactive"
  ],
  "original": {
    "html": "<div class=\"btn-container\">\n<button id=\"space-btn\" name=\"space-button\" type=\"submit\">\n  <span>Let's Go to Space</span>\n<div style=\"position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);\" class=\"star\"></div><div style=\"position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);\" class=\"star\"></div><div style=\"position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);\" class=\"star\"></div><div style=\"position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);\" class=\"star\"></div><div style=\"position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);\" class=\"star\"></div><div style=\"position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);\" class=\"star\"></div><div style=\"position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);\" class=\"star\"></div><div style=\"position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);\" class=\"star\"></div><div style=\"position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);\" class=\"star\"></div><div style=\"position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);\" class=\"star\"></div><div style=\"position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);\" class=\"star\"></div><div style=\"position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);\" class=\"star\"></div><div style=\"position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);\" class=\"star\"></div><div style=\"position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);\" class=\"star\"></div><div style=\"position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);\" class=\"star\"></div><div style=\"position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);\" class=\"star\"></div><div style=\"position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);\" class=\"star\"></div><div style=\"position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);\" class=\"star\"></div><div style=\"position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);\" class=\"star\"></div><div style=\"position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);\" class=\"star\"></div><div style=\"position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);\" class=\"star\"></div><div style=\"position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);\" class=\"star\"></div><div style=\"position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);\" class=\"star\"></div><div style=\"position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);\" class=\"star\"></div><div style=\"position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);\" class=\"star\"></div><div style=\"position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);\" class=\"star\"></div><div style=\"position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);\" class=\"star\"></div><div style=\"position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);\" class=\"star\"></div><div style=\"position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);\" class=\"star\"></div><div style=\"position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);\" class=\"star\"></div><div style=\"position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);\" class=\"star\"></div><div style=\"position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);\" class=\"star\"></div><div style=\"position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);\" class=\"star\"></div><div style=\"position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);\" class=\"star\"></div><div style=\"position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);\" class=\"star\"></div><div style=\"position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);\" class=\"star\"></div><div style=\"position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);\" class=\"star\"></div><div style=\"position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);\" class=\"star\"></div><div style=\"position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);\" class=\"star\"></div><div style=\"position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);\" class=\"star\"></div><div style=\"animation-delay: 1.2122s;\" class=\"shooting-star shooting-star-1\"></div><div style=\"animation-delay: 0.777895s;\" class=\"shooting-star shooting-star-2\"></div><div style=\"animation-delay: 4.90483s;\" class=\"shooting-star shooting-star-3\"></div><div style=\"animation-delay: 3.66012s;\" class=\"shooting-star shooting-star-4\"></div></button>\n</div>",
    "css": "/* From Uiverse.io by zanina-yassine - Tags: button */\nbutton#space-btn {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border: 0;\n  outline: 0;\n  border-radius: 11px;\n  background: #03001e;\n  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);\n  cursor: pointer;\n}\n\n.btn-container {\n  width: 200px;\n  height: 60px;\n  position: relative;\n  overflow: visible;\n}\n\n.btn-container::after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 20px;\n  z-index: -1;\n  background: #03001e;\n  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);\n  filter: blur(20px);\n  opacity: 0;\n}\n\n.btn-container:hover {\n  transform: scale(1.1);\n  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.btn-container:hover:after {\n  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n  opacity: 0.6;\n}\n\nbutton span {\n  color: white;\n  font-weight: 700;\n  font-size: 16px;\n}\n\nbutton#space-btn div.star {\n  width: 1px;\n  height: 1px;\n  background-color: white;\n  border-radius: 50%;\n  animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star {\n  width: 80px;\n  height: 1px;\n  position: absolute;\n  background: linear-gradient(80deg, #ffffffff, #ffffff00);\n  border-radius: 50%;\n  transform: rotate(-40deg);\n  opacity: 0\n}\n\nbutton#space-btn div.shooting-star-1 {\n  animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star-2 {\n  animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star-3 {\n  animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star-4 {\n  animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n@keyframes blink {\n  0% {\n    box-shadow: 0 0 10px 0 white;\n  }\n\n  50% {\n    box-shadow: 0 0 10px 2px white;\n  }\n\n  100% {\n    box-shadow: 0 0 10px 0 white;\n  }\n}\n\n@keyframes fallingStar1 {\n  0% {\n    top: -10px;\n    left: 220px;\n    opacity: 1;\n  }\n\n  100% {\n    top: 200px;\n    left: -20px;\n    opacity: 1;\n  }\n}\n\n@keyframes fallingStar2 {\n  0% {\n    top: -10px;\n    left: 150px;\n    opacity: 1;\n  }\n\n  100% {\n    top: 200px;\n    left: -90px;\n    opacity: 1;\n  }\n}\n\n@keyframes fallingStar3 {\n  0% {\n    top: -10px;\n    left: 80px;\n    opacity: 1\n  }\n\n  100% {\n    top: 200px;\n    left: -160px;\n    opacity: 1\n  }\n}\n\n@keyframes fallingStar4 {\n  0% {\n    top: -10px;\n    left: 0px;\n    opacity: 1;\n  }\n\n  100% {\n    top: 200px;\n    left: -240px;\n    opacity: 1;\n  }\n}",
    "file_path": "/mnt/persist/workspace/Buttons/zanina-yassine_shy-octopus-85.html"
  },
  "uniapp": {
    "template": "<view class=\"btn-container\"></view>\n<button id=\"space-btn\" name=\"space-button\" type=\"submit\"></button>\n  <text>Let's Go to Space</text>\n<view style=\"position: absolute; left: 119.273px; top: 18.0747px; animation-delay: 3.37051s; transform: scale(0.196521);\" class=\"star\"></view><view style=\"position: absolute; left: 166.774px; top: 47.4519px; animation-delay: 3.03913s; transform: scale(0.33078);\" class=\"star\"></view><view style=\"position: absolute; left: 238.677px; top: 19.6434px; animation-delay: 3.85796s; transform: scale(1.29037);\" class=\"star\"></view><view style=\"position: absolute; left: 22.2022px; top: 4.69534px; animation-delay: 4.9415s; transform: scale(1.82231);\" class=\"star\"></view><view style=\"position: absolute; left: 206.74px; top: 40.7685px; animation-delay: 1.59195s; transform: scale(1.01375);\" class=\"star\"></view><view style=\"position: absolute; left: 241.531px; top: 14.2516px; animation-delay: 1.67616s; transform: scale(0.811597);\" class=\"star\"></view><view style=\"position: absolute; left: 14.754px; top: 25.2924px; animation-delay: 0.0348248s; transform: scale(0.102529);\" class=\"star\"></view><view style=\"position: absolute; left: 220.444px; top: 43.9803px; animation-delay: 1.5106s; transform: scale(0.16088);\" class=\"star\"></view><view style=\"position: absolute; left: 95.948px; top: 54.8942px; animation-delay: 3.18662s; transform: scale(1.7822);\" class=\"star\"></view><view style=\"position: absolute; left: 30.3484px; top: 36.5984px; animation-delay: 4.30868s; transform: scale(1.16326);\" class=\"star\"></view><view style=\"position: absolute; left: 184.622px; top: 20.0923px; animation-delay: 2.83829s; transform: scale(1.27781);\" class=\"star\"></view><view style=\"position: absolute; left: 142.1px; top: 22.3542px; animation-delay: 2.73988s; transform: scale(1.62715);\" class=\"star\"></view><view style=\"position: absolute; left: 145.079px; top: 6.97553px; animation-delay: 0.0408754s; transform: scale(0.468075);\" class=\"star\"></view><view style=\"position: absolute; left: 6.67886px; top: 38.4849px; animation-delay: 3.84019s; transform: scale(0.272217);\" class=\"star\"></view><view style=\"position: absolute; left: 201.17px; top: 39.9168px; animation-delay: 2.93587s; transform: scale(0.521258);\" class=\"star\"></view><view style=\"position: absolute; left: 224.215px; top: 42.9903px; animation-delay: 0.895495s; transform: scale(0.0458902);\" class=\"star\"></view><view style=\"position: absolute; left: 42.2308px; top: 9.78383px; animation-delay: 4.58407s; transform: scale(0.0422065);\" class=\"star\"></view><view style=\"position: absolute; left: 91.2734px; top: 14.0408px; animation-delay: 2.05927s; transform: scale(0.11997);\" class=\"star\"></view><view style=\"position: absolute; left: 35.6985px; top: 52.6403px; animation-delay: 3.07343s; transform: scale(0.672992);\" class=\"star\"></view><view style=\"position: absolute; left: 76.4191px; top: 48.453px; animation-delay: 2.35679s; transform: scale(1.46957);\" class=\"star\"></view><view style=\"position: absolute; left: 184.503px; top: 4.18267px; animation-delay: 1.43409s; transform: scale(0.606616);\" class=\"star\"></view><view style=\"position: absolute; left: 221.039px; top: 54.2493px; animation-delay: 2.92356s; transform: scale(0.638665);\" class=\"star\"></view><view style=\"position: absolute; left: 185.612px; top: 44.3px; animation-delay: 1.36401s; transform: scale(1.65012);\" class=\"star\"></view><view style=\"position: absolute; left: 154.027px; top: 45.9848px; animation-delay: 3.723s; transform: scale(1.4118);\" class=\"star\"></view><view style=\"position: absolute; left: 220.591px; top: 4.95194px; animation-delay: 0.363098s; transform: scale(0.52369);\" class=\"star\"></view><view style=\"position: absolute; left: 236.028px; top: 11.1663px; animation-delay: 3.67493s; transform: scale(0.956478);\" class=\"star\"></view><view style=\"position: absolute; left: 110.241px; top: 20.2684px; animation-delay: 2.94906s; transform: scale(1.2193);\" class=\"star\"></view><view style=\"position: absolute; left: 12.602px; top: 19.8836px; animation-delay: 4.072s; transform: scale(1.49026);\" class=\"star\"></view><view style=\"position: absolute; left: 30.0911px; top: 37.9746px; animation-delay: 1.02002s; transform: scale(1.41008);\" class=\"star\"></view><view style=\"position: absolute; left: 62.3096px; top: 9.64604px; animation-delay: 3.9445s; transform: scale(0.231214);\" class=\"star\"></view><view style=\"position: absolute; left: 44.7189px; top: 32.4307px; animation-delay: 4.78921s; transform: scale(0.359408);\" class=\"star\"></view><view style=\"position: absolute; left: 191.866px; top: 27.151px; animation-delay: 1.34451s; transform: scale(1.13484);\" class=\"star\"></view><view style=\"position: absolute; left: 47.6744px; top: 3.00604px; animation-delay: 1.04567s; transform: scale(0.682023);\" class=\"star\"></view><view style=\"position: absolute; left: 98.6225px; top: 49.6115px; animation-delay: 2.41384s; transform: scale(1.96254);\" class=\"star\"></view><view style=\"position: absolute; left: 57.4785px; top: 29.6588px; animation-delay: 3.3569s; transform: scale(1.53118);\" class=\"star\"></view><view style=\"position: absolute; left: 13.2213px; top: 24.538px; animation-delay: 1.69582s; transform: scale(1.6236);\" class=\"star\"></view><view style=\"position: absolute; left: 131.656px; top: 31.1837px; animation-delay: 1.29918s; transform: scale(1.84486);\" class=\"star\"></view><view style=\"position: absolute; left: 56.9067px; top: 51.9904px; animation-delay: 4.74375s; transform: scale(0.749788);\" class=\"star\"></view><view style=\"position: absolute; left: 82.8361px; top: 54.3876px; animation-delay: 1.28648s; transform: scale(0.566118);\" class=\"star\"></view><view style=\"position: absolute; left: 193.213px; top: 43.9428px; animation-delay: 0.390178s; transform: scale(1.411);\" class=\"star\"></view><view style=\"animation-delay: 1.2122s;\" class=\"shooting-star shooting-star-1\"></view><view style=\"animation-delay: 0.777895s;\" class=\"shooting-star shooting-star-2\"></view><view style=\"animation-delay: 4.90483s;\" class=\"shooting-star shooting-star-3\"></view><view style=\"animation-delay: 3.66012s;\" class=\"shooting-star shooting-star-4\"></view></button>\n</div>",
    "script": "export default {\n  name: 'GalaxyShyOctopus85',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by zanina-yassine - Tags: button */\nbutton#space-btn {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border: 0;\n  outline: 0;\n  border-radius: 22rpx;\n  background: #03001e;\n  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n\n.btn-container {\n  width: 400rpx;\n  height: 120rpx;\n  position: relative;\n  overflow: visible;\n}\n\n.btn-container::after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 40rpx;\n  z-index: -1;\n  background: #03001e;\n  background: linear-gradient(80deg, #ffcbf2, #ec38bc, #7303c0, #03001e);\n  \n  opacity: 0;\n}\n\n.btn-container:hover {\n  transform: scale(1.1);\n  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.btn-container:hover:after {\n  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n  opacity: 0.6;\n}\n\nbutton span {\n  color: white;\n  font-weight: 700;\n  font-size: 32rpx;\n}\n\nbutton#space-btn div.star {\n  width: 2rpx;\n  height: 2rpx;\n  background-color: white;\n  border-radius: 50%;\n  animation: blink 2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star {\n  width: 160rpx;\n  height: 2rpx;\n  position: absolute;\n  background: linear-gradient(80deg, #ffffffff, #ffffff00);\n  border-radius: 50%;\n  transform: rotate(-40deg);\n  opacity: 0\n}\n\nbutton#space-btn div.shooting-star-1 {\n  animation: fallingStar1 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star-2 {\n  animation: fallingStar2 2s 10s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star-3 {\n  animation: fallingStar3 8s 20s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\nbutton#space-btn div.shooting-star-4 {\n  animation: fallingStar4 4s 6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n@keyframes blink {\n  0% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 20rpx 0 white;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n\n  50% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 20rpx 4rpx white;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n\n  100% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 20rpx 0 white;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n}\n\n@keyframes fallingStar1 {\n  0% {\n    top: -20rpx;\n    left: 440rpx;\n    opacity: 1;\n  }\n\n  100% {\n    top: 400rpx;\n    left: -40rpx;\n    opacity: 1;\n  }\n}\n\n@keyframes fallingStar2 {\n  0% {\n    top: -20rpx;\n    left: 300rpx;\n    opacity: 1;\n  }\n\n  100% {\n    top: 400rpx;\n    left: -180rpx;\n    opacity: 1;\n  }\n}\n\n@keyframes fallingStar3 {\n  0% {\n    top: -20rpx;\n    left: 160rpx;\n    opacity: 1\n  }\n\n  100% {\n    top: 400rpx;\n    left: -320rpx;\n    opacity: 1\n  }\n}\n\n@keyframes fallingStar4 {\n  0% {\n    top: -20rpx;\n    left: 0rpx;\n    opacity: 1;\n  }\n\n  100% {\n    top: 400rpx;\n    left: -480rpx;\n    opacity: 1;\n  }\n}\n\n",
    "component_name": "GalaxyShyOctopus85"
  },
  "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": 8632,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:38.427Z",
  "updated_at": "2025-07-31T07:55:38.427Z"
}