Implementing Spatial Effects Buttons Using HTML/CSS

With the continuous evolution of web design and development technologies, button effects have become an important means of enhancing user experience. Spatial effects buttons, as a novel form of interaction, can provide users with an immersive visual experience, making interactions more spatially rich and engaging. By using HTML and CSS, we can easily create Spatial effects buttons, offering users a distinctive interactive experience.

Here is the specific code:

HTML

<div id="pulsa" class="pulsa">
  <button id="cta" class="cta">
    Spatial button<div class="star a"></div>
  <div class="star b"></div>
  <div class="star c"></div>
  <div class="star d"></div>
  <div class="star e"></div>
  <div class="star f"></div>
  <div class="star g"></div>
  <svg version="1.1" viewBox="0 0 1024 1024" width="24px" class="rocket"><path fill="#3A7EB9" d="M662.72 462.784l136.448 169.408v173.248l-136.448-48.32zM342.72 457.344L206.272 626.816v173.248l136.448-48.384z"></path><path fill="#D48171" d="M570.688 418.688l-142.848 1.152a266.496 266.496 0 0 1-20.288-0.576l3.712 448.64c0.256 28.928 94.272 130.048 94.272 130.048s93.888-102.656 93.632-131.584l-3.712-448.96a344.64 344.64 0 0 1-24.768 1.28z"></path><path fill="#E9DF92" d="M531.456 599.296l-63.04 0.576c-3.008 0-5.952-0.064-8.96-0.384l2.176 257.792c0.128 16.64 41.728 74.816 41.728 74.816s41.344-58.944 41.28-75.52l-2.176-257.92c-3.648 0.384-7.296 0.64-11.008 0.64z"></path><path fill="#B5D5EB" d="M554.304 93.568a324.352 324.352 0 0 0-110.592 1.728L342.72 240.768v584.512c13.824-0.96 27.968-1.536 42.368-1.536h245.248c11.84 0 23.36 0.384 34.816 1.024V253.312L554.304 93.568z"></path><path fill="#3A7EB9" d="M541.44 94.144L500.416 35.008l-45.696 59.136v29.504h89.024v-29.504zM459.456 288.64h88.96v88.896h-88.96zM459.456 467.456h88.96v88.96h-88.96zM459.456 634.176h88.96v88.896h-88.96zM364.928 788.736h277.76v44.352h-277.76z"></path></svg>
  </button>
  
</div>

CSS

.pulsa {
  animation: pulsa 1.4s infinite;
  min-width: 200px;
  width: fit-content;
  border-radius: 9999px;
  /* overflow: hidden; */
}

.cta {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: none;
  border-radius: 9999px;
  padding: 8px 16px;
  color: white;
  font-size: 15px;
  background: linear-gradient(109.6deg, #090979 11.2%, #9006A1 53.7%, #090979 100.2%);
  letter-spacing: 0.08em;
  font-weight: 800;
  position: relative;
}

.cta:active {
  animation: pulsa-active .4s infinite;
}

.star {
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  animation: pulsa-stella 1.8s infinite;
  transition: all .8s ease-in-out;
}

.star.a {
  top: 8px;
  left: 6px;
}

.star.b {
  top: 2px;
  left: 16px;
}

.star.c {
  top: 18px;
  left: 8px;
}

.star.d {
  top: 14px;
  left: 20px;
}

.star.e {
  top: 30px;
  left: 8px;
}

.star.f {
  top: 24px;
  left: 24px;
}

.star.g {
  top: 10px;
  left: 32px;
}

.pulsa:hover .star.a {
  transform: translate3d(0px, 8px, 0);
}

.pulsa:hover .star.b {
  transform: translate3d(-4px, 6px, 0);
}

.pulsa:hover .star.c {
  transform: translate3d(14px, -8px, 0);
}

.pulsa:hover .star.d {
  transform: translate3d(16px, -2px, 0);
}

.pulsa:hover .star.e {
  transform: translate3d(58px, -20px, 0);
}

.pulsa:hover .star.f {
  transform: translate3d(34px, 2px, 0);
}

.pulsa:hover .star.g {
  transform: translate3d(10px, 16px, 0);
}

.rocket {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: -1;
  transform: rotate(180deg);
  transition: all .3s ease-in-out;
}

.pulsa:hover .rocket {
  z-index: auto;
  animation: muovi-razzo 1.8s linear;
  transform: rotate(0deg);
}

@keyframes pulsa {
  0% {
    box-shadow: 0 0 0 0 #9006A1;
  }

  100% {
    box-shadow: 0 0 0 8px #fbb32f01;
  }
}

@keyframes pulsa-stella {
  0% {
    box-shadow: 0 0 0 0 #ffffff;
  }

  100% {
    box-shadow: 0 0 0 4px #fbb32f01;
  }
}

@keyframes muovi-razzo {
  from {
    transform: rotate(180deg);
  }

  25% {
    transform: translate3d(40px, 32px, 0);
  }

  50% {
    transform: translate3d(32px, -60px, 0);
  }

  75% {
    transform: translate3d(0px, -60px, 0) rotate(0);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes pulsa-active {
  0% {
    box-shadow: 0 0 0 0 #9006A1;
  }

  100% {
    box-shadow: 0 0 0 16px #fbb32f01;
  }
}

HTML & CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pulsa {
      animation: pulsa 1.4s infinite;
      min-width: 200px;
      width: fit-content;
      border-radius: 9999px;
      /* overflow: hidden; */
    }

    .cta {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background-color: none;
      border-radius: 9999px;
      padding: 8px 16px;
      color: white;
      font-size: 15px;
      background: linear-gradient(109.6deg, #090979 11.2%, #9006A1 53.7%, #090979 100.2%);
      letter-spacing: 0.08em;
      font-weight: 800;
      position: relative;
    }

    .cta:active {
      animation: pulsa-active .4s infinite;
    }

    .star {
      width: 2px;
      height: 2px;
      background-color: white;
      border-radius: 50%;
      position: absolute;
      animation: pulsa-stella 1.8s infinite;
      transition: all .8s ease-in-out;
    }

    .star.a {
      top: 8px;
      left: 6px;
    }

    .star.b {
      top: 2px;
      left: 16px;
    }

    .star.c {
      top: 18px;
      left: 8px;
    }

    .star.d {
      top: 14px;
      left: 20px;
    }

    .star.e {
      top: 30px;
      left: 8px;
    }

    .star.f {
      top: 24px;
      left: 24px;
    }

    .star.g {
      top: 10px;
      left: 32px;
    }

    .pulsa:hover .star.a {
      transform: translate3d(0px, 8px, 0);
    }

    .pulsa:hover .star.b {
      transform: translate3d(-4px, 6px, 0);
    }

    .pulsa:hover .star.c {
      transform: translate3d(14px, -8px, 0);
    }

    .pulsa:hover .star.d {
      transform: translate3d(16px, -2px, 0);
    }

    .pulsa:hover .star.e {
      transform: translate3d(58px, -20px, 0);
    }

    .pulsa:hover .star.f {
      transform: translate3d(34px, 2px, 0);
    }

    .pulsa:hover .star.g {
      transform: translate3d(10px, 16px, 0);
    }

    .rocket {
      position: absolute;
      top: 8px;
      right: 16px;
      z-index: -1;
      transform: rotate(180deg);
      transition: all .3s ease-in-out;
    }

    .pulsa:hover .rocket {
      z-index: auto;
      animation: muovi-razzo 1.8s linear;
      transform: rotate(0deg);
    }

    @keyframes pulsa {
      0% {
        box-shadow: 0 0 0 0 #9006A1;
      }

      100% {
        box-shadow: 0 0 0 8px #fbb32f01;
      }
    }

    @keyframes pulsa-stella {
      0% {
        box-shadow: 0 0 0 0 #ffffff;
      }

      100% {
        box-shadow: 0 0 0 4px #fbb32f01;
      }
    }

    @keyframes muovi-razzo {
      from {
        transform: rotate(180deg);
      }

      25% {
        transform: translate3d(40px, 32px, 0);
      }

      50% {
        transform: translate3d(32px, -60px, 0);
      }

      75% {
        transform: translate3d(0px, -60px, 0) rotate(0);
      }

      to {
        transform: rotate(0deg);
      }
    }

    @keyframes pulsa-active {
      0% {
        box-shadow: 0 0 0 0 #9006A1;
      }

      100% {
        box-shadow: 0 0 0 16px #fbb32f01;
      }
    }
  </style>
</head>

<body>

  <div id="pulsa" class="pulsa">
    <button id="cta" class="cta">
      Spatial button<div class="star a"></div>
      <div class="star b"></div>
      <div class="star c"></div>
      <div class="star d"></div>
      <div class="star e"></div>
      <div class="star f"></div>
      <div class="star g"></div>
      <svg version="1.1" viewBox="0 0 1024 1024" width="24px" class="rocket">
        <path fill="#3A7EB9"
          d="M662.72 462.784l136.448 169.408v173.248l-136.448-48.32zM342.72 457.344L206.272 626.816v173.248l136.448-48.384z">
        </path>
        <path fill="#D48171"
          d="M570.688 418.688l-142.848 1.152a266.496 266.496 0 0 1-20.288-0.576l3.712 448.64c0.256 28.928 94.272 130.048 94.272 130.048s93.888-102.656 93.632-131.584l-3.712-448.96a344.64 344.64 0 0 1-24.768 1.28z">
        </path>
        <path fill="#E9DF92"
          d="M531.456 599.296l-63.04 0.576c-3.008 0-5.952-0.064-8.96-0.384l2.176 257.792c0.128 16.64 41.728 74.816 41.728 74.816s41.344-58.944 41.28-75.52l-2.176-257.92c-3.648 0.384-7.296 0.64-11.008 0.64z">
        </path>
        <path fill="#B5D5EB"
          d="M554.304 93.568a324.352 324.352 0 0 0-110.592 1.728L342.72 240.768v584.512c13.824-0.96 27.968-1.536 42.368-1.536h245.248c11.84 0 23.36 0.384 34.816 1.024V253.312L554.304 93.568z">
        </path>
        <path fill="#3A7EB9"
          d="M541.44 94.144L500.416 35.008l-45.696 59.136v29.504h89.024v-29.504zM459.456 288.64h88.96v88.896h-88.96zM459.456 467.456h88.96v88.96h-88.96zM459.456 634.176h88.96v88.896h-88.96zM364.928 788.736h277.76v44.352h-277.76z">
        </path>
      </svg>
    </button>

  </div>

</body>

</html>

THE END