* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

overflow: hidden;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

background:
    radial-gradient(
      circle at 50% 45%,
      #14243d 0%,
      #080e18 45%,
      #03060b 100%
    );

color: white;
}

/* =========================================
   STAGE
========================================= */

.stage {
  position: relative;

display: flex;
  flex-direction: column;
  align-items: center;

gap: 28px;
}

/* subtle background grid */

.stage::before {
  content: "";

position: fixed;
  inset: 0;

background-image:
    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    );

background-size: 40px 40px;

pointer-events: none;

mask-image:
    radial-gradient(
      circle,
      black 0%,
      transparent 65%
    );
}

/* =========================================
   BUTTON
========================================= */

.future-button {

position: relative;

width: 260px;
  height: 78px;

border: none;

border-radius: 18px;

padding: 0;

background: transparent;

color: white;

cursor: pointer;

perspective: 700px;

transform-style: preserve-3d;

transition:
    transform 0.18s ease;

isolation: isolate;
}

/* =========================================
   OUTER GLOW
========================================= */

.button-glow {

position: absolute;

inset: -14px;

border-radius: 28px;

background:
    radial-gradient(
      ellipse,
      rgba(66, 180, 255, 0.42),
      transparent 65%
    );

filter: blur(18px);

opacity: 0.28;

transform:
    translateZ(-20px);

transition:
    opacity 0.3s ease,
    transform 0.3s ease;

}

/* =========================================
   BORDER
========================================= */

.button-border {

position: absolute;

inset: 0;

border-radius: 18px;

background:
    linear-gradient(
      135deg,
      #78d7ff,
      #347cff 45%,
      #9c5cff 100%
    );

z-index: 0;
}

/*
   Inner surface
*/

.button-border::after {

content: "";

position: absolute;

inset: 2px;

border-radius: 16px;

background:
    linear-gradient(
      135deg,
      rgba(16, 31, 52, 0.98),
      rgba(5, 13, 27, 0.98)
    );

}

/* =========================================
   BUTTON CONTENT
========================================= */

.button-content {

position: absolute;

inset: 2px;

z-index: 3;

display: flex;

align-items: center;

justify-content: center;

gap: 14px;

border-radius: 16px;

overflow: hidden;

}

/* =========================================
   ICON
========================================= */

.button-icon {

width: 32px;
  height: 32px;

display: flex;

align-items: center;
  justify-content: center;

border-radius: 10px;

background:
    rgba(82, 184, 255, 0.12);

border:
    1px solid
    rgba(113, 211, 255, 0.28);

font-size: 15px;

transition:
    transform 0.35s ease,
    background 0.35s ease;

}

/* =========================================
   TEXT
========================================= */

.button-text {

font-size: 13px;

font-weight: 650;

letter-spacing: 2.5px;

transition:
    letter-spacing 0.35s ease;

}

/* =========================================
   ARROW
========================================= */

.button-arrow {

font-size: 18px;

opacity: 0.55;

transform:
    translateX(0);

transition:
    transform 0.35s ease,
    opacity 0.35s ease;

}

/* =========================================
   LIGHT SWEEP
========================================= */

.shine {

position: absolute;

z-index: 5;

top: -40%;

left: -75%;

width: 45%;

height: 180%;

transform:
    rotate(18deg);

background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.42),
      transparent
    );

filter: blur(5px);

opacity: 0;

pointer-events: none;

}

/* =========================================
   HOVER
========================================= */

.future-button:hover {

transform:
    translateY(-3px)
    scale(1.025);

}

.future-button:hover .button-glow {

opacity: 0.75;

transform:
    translateZ(-20px)
    scale(1.08);

}

.future-button:hover .button-icon {

transform:
    rotate(12deg)
    scale(1.08);

background:
    rgba(82, 184, 255, 0.22);

}

.future-button:hover .button-text {

letter-spacing: 3.2px;

}

.future-button:hover .button-arrow {

transform:
    translate(5px, -4px);

opacity: 1;

}

/* light sweep */

.future-button:hover .shine {

animation:
    sweep 0.8s ease forwards;

}

@keyframes sweep {

0% {
    left: -75%;
    opacity: 0;
  }

20% {
    opacity: 1;
  }

100% {
    left: 135%;
    opacity: 0;
  }

}

/* =========================================
   ACTIVE / PRESS
========================================= */

.future-button:active {

transform:
    translateY(2px)
    scale(0.975);

}

.future-button:active .button-glow {

opacity: 0.95;

}

.future-button:active .button-icon {

transform:
    scale(0.9)
    rotate(-8deg);

}

/* =========================================
   STATUS
========================================= */

.status {

min-width: 100px;

text-align: center;

font-size: 9px;

letter-spacing: 3px;

color:
    rgba(255,255,255,0.36);

transition:
    color 0.25s ease;

}

.status.active {

color:
    #73d7ff;

text-shadow:
    0 0 15px
    rgba(92, 210, 255, 0.7);

}

/* =========================================
   RIPPLE
========================================= */

.ripple {

position: absolute;

width: 10px;
  height: 10px;

border-radius: 50%;

background:
    rgba(255,255,255,0.55);

transform:
    translate(-50%, -50%)
    scale(0);

animation:
    ripple 0.65s ease-out forwards;

pointer-events: none;

z-index: 10;

}

@keyframes ripple {

0% {

transform:
      translate(-50%, -50%)
      scale(0);

opacity: 0.8;

}

100% {

transform:
      translate(-50%, -50%)
      scale(28);

opacity: 0;

}

/* =========================================
   PARTICLE DOT
========================================= */

.particle {

position: fixed;

width: 4px;
  height: 4px;

border-radius: 50%;

background:
    #6bd6ff;

box-shadow:
    0 0 10px
    #6bd6ff;

pointer-events: none;

z-index: 20;

animation:
    particleFly 0.7s ease-out forwards;

}

@keyframes particleFly {

0% {

transform:
      translate(0, 0)
      scale(1);

opacity: 1;

}

100% {

transform:
      translate(
        var(--x),
        var(--y)
      )
      scale(0);

opacity: 0;

}

const button =
  document.getElementById(
    "futureButton"
  );

const status =
  document.getElementById(
    "status"
  );

/* =========================================
   MAGNETIC / 3D TILT
========================================= */

button.addEventListener(
  "pointermove",
  function(event) {

const rect =
      button.getBoundingClientRect();

const x =
      event.clientX -
      rect.left;

const y =
      event.clientY -
      rect.top;

/*
      Convert position into
      -1 → +1
    */

const percentX =
      (x / rect.width) * 2 - 1;

const percentY =
      (y / rect.height) * 2 - 1;

const rotateY =
      percentX * 8;

const rotateX =
      -percentY * 6;

const moveX =
      percentX * 5;

const moveY =
      percentY * 4;

button.style.transform = `
      translate(${moveX}px, ${moveY}px)
      rotateX(${rotateX}deg)
      rotateY(${rotateY}deg)
      scale(1.025)
    `;
  }
);

/* =========================================
   RESET TILT
========================================= */

button.addEventListener(
  "pointerleave",
  function() {

button.style.transform =
      "translate(0, 0) rotateX(0) rotateY(0) scale(1)";

}
);

/* =========================================
   CLICK
========================================= */

button.addEventListener(
  "click",
  function(event) {

/*
      Status
    */

status.textContent =
      "ACTIVATED";

status.classList.add(
      "active"
    );

/*
      Ripple
    */

const rect =
      button.getBoundingClientRect();

const ripple =
      document.createElement(
        "span"
      );

ripple.className =
      "ripple";

ripple.style.left =
      `${event.clientX - rect.left}px`;

ripple.style.top =
      `${event.clientY - rect.top}px`;

button.appendChild(
      ripple
    );

setTimeout(
      () => ripple.remove(),
      700
    );

/*
      Create particles
    */

for (
      let i = 0;
      i < 14;
      i++
    ) {

createParticle(
        event.clientX,
        event.clientY
      );

}

/*
      Return status after a moment
    */

setTimeout(
      function() {

status.textContent =
          "READY";

status.classList.remove(
          "active"
        );

},
      1200
    );

}
);

/* =========================================
   PARTICLE GENERATOR
========================================= */

function createParticle(
  x,
  y
) {

const particle =
    document.createElement(
      "span"
    );

particle.className =
    "particle";

particle.style.left =
    `${x}px`;

particle.style.top =
    `${y}px`;

/*
     Random direction
  */

const angle =
    Math.random() *
    Math.PI *
    2;

const distance =
    40 +
    Math.random() * 70;

const offsetX =
    Math.cos(angle) *
    distance;

const offsetY =
    Math.sin(angle) *
    distance;

particle.style.setProperty(
    "--x",
    `${offsetX}px`
  );

particle.style.setProperty(
    "--y",
    `${offsetY}px`
  );

document.body.appendChild(
    particle
  );

setTimeout(
    () => particle.remove(),
    750
  );

}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground