galaxy/Buttons/Lakshay-art_nice-insect-63.html

<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>