<button class="btn-shard">
  <span class="btn-shard-text">Activate</span>
</button>

.btn-shard {
  position: relative;
  padding: 14px 36px;
  border: none;
  background:
    linear-gradient(115deg,
      #0e0e1a 0%,
      #ff3d8c 30%,
      #0e0e1a 50%,
      #00d4ff 70%,
      #0e0e1a 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  box-shadow: 0 6px 18px rgba(0,212,255,0.25), 0 6px 18px rgba(255,61,140,0.25);
  transition: background-position 0.6s cubic-bezier(.3,1,.3,1), transform 0.2s;
}
.btn-shard-text { position: relative; }
.btn-shard:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
}