머티리얼 디자인

<div class="stage">
  <div class="card">
    <span class="eyebrow">ELEVATION</span>
    <h1>Card title</h1>
    <p>Elevated surfaces use shadow to show hierarchy.</p>
  </div>
  <button class="fab" id="fab"><span class="ripple" id="ripple"></span>+</button>
</div>

body{background:#f3edf7}
.stage{position:relative;width:min(90%,320px)}
.card{background:#fffbfe;border-radius:16px;padding:22px;box-shadow:0 3px 6px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.14);
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.eyebrow{font-size:10px;letter-spacing:.1em;color:#6750a4;font-weight:700}
h1{margin:6px 0 6px;font-size:18px;color:#1c1b1f}
p{margin:0;font-size:13px;color:#49454f;line-height:1.5}
.fab{position:absolute;right:-8px;bottom:-16px;width:52px;height:52px;border-radius:16px;border:0;
  background:#6750a4;color:#fff;font-size:22px;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  box-shadow:0 4px 8px rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.12);transition:box-shadow .25s}
.fab.raise{box-shadow:0 8px 16px rgba(0,0,0,.22),0 4px 8px rgba(0,0,0,.16)}
.ripple{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7);
  left:50%;top:50%;transform:translate(-50%,-50%) scale(0);opacity:0}
.ripple.go{animation:rip .6s ease-out}
@keyframes rip{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(9);opacity:0}
}

const fab = document.getElementById('fab');
const ripple = document.getElementById('ripple');
setInterval(() => {
  fab.classList.add('raise');
  ripple.classList.remove('go');
  void ripple.offsetWidth;
  ripple.classList.add('go');
  setTimeout(() => fab.classList.remove('raise'), 500);
}, 1800);