Name: Liveweave
Author: Liveweave

<!DOCTYPE html>
<html>
<head>
<title>Animated buttons</title>
</head>
<body>

<div class="lab">
  <header class="hero">
    <div class="eyebrow"><span class="live-dot"></span> INTERACTION PLAYGROUND / 001</div>
    <h1>Buttons with<br><em>personality.</em></h1>
    <p>A curated collection of delightful interactions. Hover, click, and explore.</p>
    <div class="hero-tags">
      <span>12 INTERACTIONS</span>
      <span>PURE CSS + JS</span>
      <span>MADE TO PLAY</span>
    </div>
  </header>

<div class="section-heading">
    <span>THE COLLECTION</span>
    <span>01 — 12</span>
  </div>

<main class="gallery">
    <article class="tile">
      <div class="tile-top"><span>01 / AURORA</span><span class="category">GRADIENT</span></div>
      <div class="stage"><button class="btn aurora">Explore now <span>↗</span></button></div>
      <p>Living Gradient</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>02 / VOLT</span><span class="category">GLOW</span></div>
      <div class="stage"><button class="btn neon">ENTER THE VOID</button></div>
      <p>Electric Neon</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>03 / LIQUID</span><span class="category">MOTION</span></div>
      <div class="stage"><button class="btn liquid"><span>Get started</span></button></div>
      <p>Liquid Fill</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>04 / GLASS</span><span class="category">MATERIAL</span></div>
      <div class="stage glass-stage"><button class="btn glass">Discover more <span>✦</span></button></div>
      <p>Frosted Glass</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>05 / PRESS</span><span class="category">TACTILE</span></div>
      <div class="stage"><button class="btn push">Push me <span>↗</span></button></div>
      <p>3D Tactile</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>06 / MAGNET</span><span class="category">PHYSICS</span></div>
      <div class="stage"><button class="btn magnetic">Magnetic <span>✳</span></button></div>
      <p>Magnetic Attraction</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>07 / RIPPLE</span><span class="category">FEEDBACK</span></div>
      <div class="stage"><button class="btn ripple">Click anywhere <span>+</span></button></div>
      <p>Ripple Feedback</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>08 / OUTLINE</span><span class="category">BORDER</span></div>
      <div class="stage"><button class="btn border-spin"><span>Unlock magic ↗</span></button></div>
      <p>Orbiting Border</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>09 / MORPH</span><span class="category">STATE</span></div>
      <div class="stage"><button class="btn morph">Follow <span>+</span></button></div>
      <p>State Morphing</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>10 / SHIMMER</span><span class="category">LIGHT</span></div>
      <div class="stage"><button class="btn shimmer">Premium Access <span>✧</span></button></div>
      <p>Metallic Shimmer</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>11 / LOADING</span><span class="category">PROGRESS</span></div>
      <div class="stage"><button class="btn loading-btn"><span class="loading-label">Download file ↓</span><span class="spinner"></span></button></div>
      <p>Progress Feedback</p>
    </article>

<article class="tile">
      <div class="tile-top"><span>12 / HEART</span><span class="category">REACTION</span></div>
      <div class="stage"><button class="btn heart-btn"><span class="heart-symbol">♥</span><span class="heart-label">Like this</span></button></div>
      <p>Playful Reaction</p>
    </article>
  </main>

<footer><span>BUTTON LAB © 2026</span><span>DESIGNED FOR LIVEWEAVE</span></footer>
</div>

</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #090a0e;
  color: #f7f7fa;
  font-family: 'DM Sans', sans-serif;
}

.lab {
  max-width: 1240px;
  margin: auto;
  padding: 55px 36px 30px;
}

.hero {
  padding: 30px 0 80px;
  border-bottom: 1px solid #262832;
}

.eyebrow, .section-heading, .tile-top, footer {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.eyebrow {
  color: #a9a8bd;
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #bcff7a;
  border-radius: 50%;
  box-shadow: 0 0 15px #bcff7a;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% { opacity: .35; }
}

h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(54px, 8vw, 104px);
  letter-spacing: -6px;
  line-height: 1.03;
  font-weight: 700;
  margin: 35px 0 25px;
}

h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #d0b4ff, #9c9aff, #8de6df);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 17px;
  color: #9295a5;
  line-height: 1.6;
  max-width: 480px;
}

.hero-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 35px;
}

.hero-tags span {
  border: 1px solid #30313c;
  border-radius: 30px;
  padding: 9px 14px;
  color: #8f91a1;
  font-size: 10px;
  letter-spacing: 1px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
  color: #858797;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  min-width: 0;
  border: 1px solid #252631;
  background: #111218;
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}

.tile:hover {
  border-color: #484957;
  transform: translateY(-3px);
}

.tile-top {
  display: flex;
  justify-content: space-between;
  padding: 23px 22px 0;
  color: #9d9eac;
  font-size: 10px;
}

.category { color: #666978; }

.stage {
  min-height: 165px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  position: relative;
  isolation: isolate;
}

.tile p {
  margin: 0;
  padding: 18px 22px;
  border-top: 1px solid #24252f;
  color: #e1e2ec;
  font-size: 13px;
  font-weight: 600;
}

.btn {
  border: 0;
  cursor: pointer;
  font: 600 14px 'DM Sans', sans-serif;
  white-space: nowrap;
  padding: 16px 25px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  transition: transform .25s, box-shadow .25s, background .25s;
}

.btn:focus-visible {
  outline: 2px solid #aab6ff;
  outline-offset: 4px;
}

.btn:active { transform: scale(.96); }

/* 01 AURORA */
.aurora {
  color: white;
  background: linear-gradient(110deg, #6554f5, #e14eb0, #f79752, #6554f5);
  background-size: 300% 100%;
  animation: auroraMove 5s linear infinite;
  box-shadow: 0 10px 35px #9a4de344;
}

.aurora:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px #bb51eb66;
}

@keyframes auroraMove {
  to { background-position: 300% 0; }
}

/* 02 NEON */
.neon {
  background: #101d19;
  color: #a0ffc7;
  border: 1px solid #49eaa0;
  letter-spacing: 1px;
  font-size: 11px;
  box-shadow: inset 0 0 12px #39ff9922, 0 0 12px #39ff9922;
}

.neon:hover {
  background: #45f3a0;
  color: #07150d;
  box-shadow: 0 0 18px #39ff9999, 0 0 55px #39ff9944;
}

/* 03 LIQUID */
.liquid {
  background: #f0efff;
  color: #242047;
  overflow: hidden;
}

.liquid:before {
  content: "";
  position: absolute;
  width: 170%;
  height: 250%;
  background: #9d86ff;
  border-radius: 45%;
  top: 105%;
  left: -35%;
  transition: top .65s cubic-bezier(.2,.8,.2,1);
  animation: liquidRotate 6s linear infinite;
}

.liquid:hover:before { top: -65%; }

.liquid span { position: relative; z-index: 1; }
.liquid:hover { color: white; }

@keyframes liquidRotate {
  to { transform: rotate(360deg); }
}

/* 04 GLASS */
.glass-stage {
  background: radial-gradient(circle at 35% 40%, #8756ce66, transparent 45%),
              radial-gradient(circle at 75% 70%, #29b8d077, transparent 50%);
}

.glass {
  background: #ffffff18;
  color: white;
  border: 1px solid #ffffff55;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px #ffffff55, 0 12px 25px #0004;
}

.glass:hover {
  background: #ffffff35;
  transform: translateY(-5px);
}

/* 05 PUSH */
.push {
  color: #31220b;
  background: #ffca60;
  box-shadow: 0 7px 0 #b57c27, 0 14px 25px #0006;
}

.push:hover { transform: translateY(2px); box-shadow: 0 5px 0 #b57c27; }
.push:active { transform: translateY(7px); box-shadow: 0 0 0 #b57c27; }

/* 06 MAGNETIC */
.magnetic {
  color: #0b1420;
  background: #a5d7ff;
  transition: transform .18s ease-out, box-shadow .25s;
}

.magnetic:hover { box-shadow: 0 10px 35px #7bc7ff55; }

/* 07 RIPPLE */
.ripple {
  color: white;
  background: #5446e9;
  overflow: hidden;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: #ffffff66;
  transform: scale(0);
  animation: rippleExpand .65s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* 08 BORDER */
.border-spin {
  color: white;
  background: #1b1b25;
  overflow: hidden;
  padding: 2px;
}

.border-spin:before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(transparent 0deg, #a987ff 80deg, transparent 130deg, #60e8e0 240deg, transparent 290deg);
  animation: orbit 3s linear infinite;
}

.border-spin span {
  position: relative;
  z-index: 1;
  background: #191a23;
  border-radius: 10px;
  padding: 14px 23px;
}

@keyframes orbit { to { transform: rotate(360deg); } }

/* 09 MORPH */
.morph {
  background: #e8e2ff;
  color: #352778;
  min-width: 150px;
}

.morph.following {
  background: #c2ffd9;
  color: #17643a;
  border-radius: 40px;
}

/* 10 SHIMMER */
.shimmer {
  color: #4c3514;
  background: linear-gradient(120deg, #c99543, #ffe7a4, #bf8d3c);
  overflow: hidden;
}

.shimmer:after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 30%;
  height: 200%;
  background: #ffffff88;
  transform: rotate(25deg);
  filter: blur(12px);
  transition: left .6s;
}

.shimmer:hover:after { left: 130%; }

/* 11 LOADING */
.loading-btn {
  min-width: 180px;
  color: #fff;
  background: #e35d85;
}

.loading-btn:hover { background: #f07198; }

.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff66;
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.loading-btn.busy .spinner { display: block; }
.loading-btn.busy .loading-label { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* 12 HEART */
.heart-btn {
  background: #2b1b29;
  color: #ffabc8;
  border: 1px solid #67344e;
}

.heart-symbol {
  font-size: 22px;
  line-height: 1;
  transition: transform .3s;
}

.heart-btn:hover .heart-symbol { transform: scale(1.35); }
.heart-btn.liked { background: #ff598f; color: white; }

.heart-btn.liked .heart-symbol {
  animation: heartPop .4s ease;
}

@keyframes heartPop {
  50% { transform: scale(1.65) rotate(-15deg); }
}

footer {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  margin-top: 50px;
  border-top: 1px solid #292a35;
  color: #737585;
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .lab { padding: 25px 16px; }
  .gallery { grid-template-columns: 1fr; }
  h1 { letter-spacing: -3px; }
  .hero { padding-bottom: 45px; }
  footer { gap: 15px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

var magnetic = document.querySelector(".magnetic");

magnetic.addEventListener("mousemove", function(e) {
  var rect = magnetic.getBoundingClientRect();
  var x = e.clientX - rect.left - rect.width / 2;
  var y = e.clientY - rect.top - rect.height / 2;
  magnetic.style.transform = "translate(" + x * 0.2 + "px," + y * 0.2 + "px)";
});

magnetic.addEventListener("mouseleave", function() {
  magnetic.style.transform = "translate(0,0)";
});

var ripple = document.querySelector(".ripple");

ripple.addEventListener("click", function(e) {
  var rect = ripple.getBoundingClientRect();
  var circle = document.createElement("span");
  var size = Math.max(rect.width, rect.height);

circle.className = "ripple-wave";
  circle.style.width = size + "px";
  circle.style.height = size + "px";
  circle.style.left = (e.clientX - rect.left - size / 2) + "px";
  circle.style.top = (e.clientY - rect.top - size / 2) + "px";

ripple.appendChild(circle);

circle.addEventListener("animationend", function() {
    circle.remove();
  });
});

var morph = document.querySelector(".morph");

morph.addEventListener("click", function() {
  morph.classList.toggle("following");

if (morph.classList.contains("following")) {
    morph.textContent = "Following";
  } else {
    morph.textContent = "Follow +";
  }
});

var loading = document.querySelector(".loading-btn");
var loadingLabel = document.querySelector(".loading-label");

loading.addEventListener("click", function() {
  if (loading.disabled) return;

loading.disabled = true;
  loading.classList.add("busy");

setTimeout(function() {
    loading.classList.remove("busy");
    loadingLabel.textContent = "Complete!";
    loading.disabled = false;

setTimeout(function() {
      loadingLabel.textContent = "Download file";
    }, 1800);
  }, 1800);
});

var heart = document.querySelector(".heart-btn");
var heartLabel = document.querySelector(".heart-label");

heart.addEventListener("click", function() {
  heart.classList.toggle("liked");

if (heart.classList.contains("liked")) {
    heartLabel.textContent = "Loved!";
    heart.setAttribute("aria-pressed", "true");
  } else {
    heartLabel.textContent = "Like this";
    heart.setAttribute("aria-pressed", "false");
  }
});

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