类型：组件 · 分类：按钮 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]<div id="bg">
<div id="orangebg"></div>
<div id="pinkbg"></div>
<div id="yellowbg"></div>
<div id="purplebg"></div>
</div>
<button class="button">
<div id="pink1" class="pink"></div>
<div id="pink2" class="pink"></div>
<div id="pink3" class="pink"></div>
<div id="pink4" class="pink"></div>
<div id="pink5" class="pink"></div>
<div id="pink6" class="pink"></div>
<div id="orange1" class="orange"></div>
<div id="orange2" class="orange"></div>
<div id="orange3" class="orange"></div>
<div id="orange4" class="orange"></div>
<div id="white1" class="white"></div>
<div id="white2" class="white"></div>
<div id="white3" class="white"></div>
<div id="white4" class="white"></div>
<div id="white5" class="white"></div>
<div id="white6" class="white"></div>
<div id="white7" class="white"></div>
<div id="white8" class="white"></div>
<div id="orange5" class="orangei"></div>
<div id="orange6" class="orangei"></div>
<div id="orange7" class="orangei"></div>
<div id="orange8" class="orangei"></div>
<div id="orange9" class="orangei"></div>
<div id="orange10" class="orangei"></div>
<div id="orange11" class="orange"></div>
<div id="pink7" class="pinki"></div>
<div id="pink8" class="pinki"></div>
<div id="pink9" class="pinki"></div>
<div id="pink10" class="pinki"></div>
<div id="pink11" class="pink"></div>
<div id="white9" class="white"></div>
<div id="white10" class="white"></div>
<div id="backdrop2"></div>
<div id="whiteOverlay"></div>
<div id="whiteBorder"></div>
<div id="whiteBorder2"></div>
<div id="white11" class="white"></div>
<div id="white12" class="white"></div>
<div id="white13" class="white"></div>
<div id="white14" class="white"></div>
<div id="white15" class="white"></div>
<div id="white16" class="white"></div>
<div id="text">
<svg
preserveAspectRatio="none"
viewBox="0 0 256 256"
height="20"
width="26"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs></defs>
<g
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
>
<path
stroke-linecap="round"
transform="matrix(1 0 0 1 0 0)"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
d="M 71.79 34.614 c -0.334 -0.497 -0.926 -0.745 -1.513 -0.63 l -18.311 3.528 l 3.718 -35.877 c 0.071 -0.682 -0.332 -1.32 -0.979 -1.55 c -0.648 -0.229 -1.362 0.011 -1.738 0.585 L 18.202 53.746 c -0.328 0.5 -0.325 1.144 0.008 1.639 c 0.33 0.493 0.922 0.742 1.513 0.632 l 18.312 -3.529 l -3.718 35.876 c -0.071 0.684 0.332 1.322 0.979 1.551 C 35.455 89.971 35.622 90 35.792 90 c 0.502 0 0.965 -0.251 1.241 -0.67 l 34.765 -53.076 C 72.126 35.754 72.122 35.11 71.79 34.614 z"
></path>
</g>
</svg>
Join now
</div>
</button>
<style>
/* From Uiverse.io by Lakshay-art - Tags: material design, neumorphism, glassmorphism, 3d, button, rounded, glow, creative */
.button {
cursor: pointer;
width: 335px;
height: 110px;
border-radius: 30px;
border: 1px solid #e5c3e6;
position: relative;
overflow: hidden;
filter: brightness(0.9) contrast(1.2)
drop-shadow(0px 20px 16px rgba(0, 0, 0, 0.212));
}
#backdrop {
height: 110px;
width: 335px;
overflow: hidden;
border-radius: 30px;
background-color: rgb(255 255 255 / 5%);
backdrop-filter: blur(10px);
}
#backdrop2 {
height: 110px;
width: 335px;
overflow: hidden;
border-radius: 30px;
background-color: rgb(255 255 255 / 5%);
backdrop-filter: blur(6px);
}
.pink {
position: absolute;
background-color: #f05ee7;
filter: blur(6px);
border-radius: 50%;
}
.pinki {
position: absolute;
background-color: #ba63d9;
/* filter: blur(6px); */
border-radius: 50%;
}
.orange {
position: absolute;
background-color: #f37130;
filter: blur(6px);
border-radius: 50%;
}
.orangei {
position: absolute;
background-color: #ff4600;
filter: blur(3px);
border-radius: 50%;
}
.white {
position: absolute;
background-color: white;
/* filter: blur(5px); */
border-radius: 25px;
}
#pink1 {
top: -10px;
left: -10px;
height: 50px;
width: 150px;
}
#pink2 {
bottom: -10px;
left: -10px;
height: 50px;
width: 140px;
}
#pink3 {
top: -5px;
right: -10px;
height: 50px;
width: 120px;
}
#pink4 {
bottom: -5px;
right: -10px;
height: 50px;
width: 140px;
}
#pink5 {
top: 25px;
left: -20px;
height: 70px;
width: 120px;
opacity: 0.7;
}
#pink6 {
top: 25px;
right: -20px;
height: 70px;
width: 120px;
opacity: 0.7;
}
#pink7 {
top: 0px;
left: -5px;
height: 30px;
width: 30px;
/* opacity: 0.7; */
}
#pink8 {
bottom: -20px;
left: -20px;
height: 110px;
width: 50px;
/* opacity: 0.7; */
}
#pink9 {
top: 0px;
right: -20px;
height: 60px;
width: 50px;
opacity: 0.7;
}
#pink10 {
bottom: 0px;
right: -20px;
height: 20px;
width: 50px;
opacity: 0.7;
}
#pink11 {
top: 25px;
right: 40px;
height: 30px;
width: 70px;
opacity: 0.5;
}
#orange1 {
top: -15px;
left: 120px;
height: 50px;
width: 130px;
}
#orange2 {
top: 30px;
left: 90px;
height: 50px;
width: 170px;
opacity: 0.7;
}
#orange3 {
top: 80px;
left: 120px;
height: 50px;
width: 120px;
}
#orange5 {
top: 10px;
left: 160px;
height: 30px;
width: 30px;
}
#orange6 {
top: 15px;
left: 135px;
height: 20px;
width: 20px;
}
#orange7 {
top: 15px;
left: 115px;
height: 20px;
width: 15px;
}
#orange8 {
bottom: 15px;
left: 135px;
height: 25px;
width: 20px;
}
#orange9 {
bottom: 15px;
left: 195px;
height: 20px;
width: 15px;
}
#orange10 {
bottom: 0px;
left: 275px;
height: 25px;
width: 15px;
}
#orange11 {
bottom: 55px;
left: 240px;
height: 50px;
width: 35px;
opacity: 0.8;
}
#white1 {
top: 8px;
left: 20px;
height: 10px;
width: 130px;
}
#white2 {
top: 35px;
left: 40px;
height: 35px;
width: 70px;
}
#white3 {
top: 8px;
left: 200px;
height: 10px;
width: 70px;
}
#white4 {
top: 35px;
left: 205px;
height: 35px;
width: 120px;
}
#white5 {
top: 30px;
right: 9px;
height: 65px;
width: 30px;
}
#white6 {
bottom: 15px;
left: 40px;
height: 10px;
width: 70px;
}
#white7 {
bottom: 15px;
right: 40px;
height: 10px;
width: 70px;
}
#white8 {
top: 15px;
right: 20px;
height: 50px;
width: 30px;
}
#white9 {
top: 30px;
left: 0px;
height: 50px;
width: 5px;
opacity: 0.6;
}
#white10 {
top: 30px;
right: 0px;
height: 50px;
width: 3px;
opacity: 0.9;
}
#white11 {
top: 6px;
left: 25px;
height: 15px;
width: 100px;
background-color: transparent;
border-bottom: 7px solid white;
border-left: 7px solid white;
filter: blur(4px);
}
#white12 {
top: 15px;
left: 8px;
height: 25px;
width: 15px;
background-color: transparent;
border-top: 3px solid white;
border-right: 3px solid #fff9;
filter: blur(2px);
}
#white13 {
bottom: 6px;
right: 9px;
height: 20px;
width: 20px;
background-color: transparent;
border-right: 7px solid white;
border-top: 7px solid white;
filter: blur(3px);
}
#white14 {
bottom: 28px;
right: 3px;
height: 20px;
width: 20px;
background-color: transparent;
border-left: 7px solid white;
border-bottom: 7px solid white;
filter: blur(2px);
}
#white15 {
top: 10px;
right: 13px;
height: 10px;
width: 10px;
filter: blur(3px);
}
#white16 {
top: 28px;
left: 28px;
height: 12px;
width: 15px;
filter: blur(3px);
}
#whiteOverlay {
position: absolute;
/* background-color: #ffffff44; */
background: linear-gradient(
180deg,
#ffffff44 92px,
#ffffff11 96px,
#ffffff66 100px
);
top: 5px;
left: 5px;
width: 324px;
height: 100px;
border-radius: 26px;
/* filter: blur(1px); */
}
#whiteBorder {
position: absolute;
/* background-color: #ffffff44; */
/* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
top: 15px;
left: 20px;
width: 295px;
height: 74px;
border-radius: 15px;
border: 5px solid #ffffff66;
filter: blur(2px);
}
#whiteBorder2 {
position: absolute;
/* background-color: #ffffff44; */
/* background: linear-gradient(180deg,#ffffff44 95px,#ffffff11 98px,#ffffff44 100px); */
top: 15px;
left: 20px;
width: 295px;
height: 74px;
border-radius: 15px;
border: 2px solid #ffffff44;
filter: blur(1px);
}
#text {
height: 110px;
width: 335px;
position: absolute;
top: 40px;
font-size: 25px;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
#bg {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-155deg,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0.15) 50px,
rgba(0, 0, 0, 0.15) 100px,
rgba(225, 225, 225, 0.15) 150px
);
filter: blur(30px);
}
#pinkbg {
position: absolute;
background-color: #e59cfaaa;
border-radius: 50%;
bottom: -150px;
filter: blur(20px);
width: 400px;
height: 200px;
right: 30px;
}
#orangebg {
position: absolute;
background-color: #fb9a71aa;
border-radius: 50%;
bottom: -150px;
filter: blur(20px);
width: 250px;
height: 200px;
right: 0px;
}
#yellowbg {
position: absolute;
background-color: #f8b74555;
border-radius: 50%;
bottom: -150px;
filter: blur(20px);
width: 100px;
height: 200px;
right: 0px;
}
#purplebg {
position: absolute;
background-color: #9b27ee33;
border-radius: 50%;
bottom: -150px;
filter: blur(30px);
width: 100px;
height: 200px;
right: 50%;
}
</style>