Spatial button · albertofanini-prog

About Spatial button · albertofanini-prog

Spatial button · albertofanini-prog is an animated CSS button by albertofanini-prog. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon, Animated

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

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

.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;
  }
}