네오 브루탈리즘

<div class="poster">
  <div class="badge">NEW</div>
  <h1>Ship it.</h1>
  <p>Loud colors, hard shadows, zero apologies.</p>
  <button class="btn" id="btn">Get started</button>
</div>

body{background:#fef7e8}
.poster{width:min(88%,320px);background:#fff29e;border:3px solid #111;border-radius:14px;
  padding:22px;position:relative;box-shadow:8px 8px 0 #111;font-family:-apple-system,"Segoe UI",sans-serif}
.badge{position:absolute;top:-14px;right:14px;background:#ff5c8a;border:2px solid #111;border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:800;box-shadow:3px 3px 0 #111}
h1{margin:6px 0 8px;font-size:clamp(22px,6vmin,32px);font-weight:900;color:#111}
p{margin:0 0 16px;font-size:12px;color:#222;line-height:1.5}
.btn{background:#5b5bf7;color:#fff;border:2.5px solid #111;border-radius:10px;padding:10px 18px;
  font-weight:800;font-size:13px;cursor:pointer;box-shadow:4px 4px 0 #111;
  transition:transform .15s,box-shadow .15s}
.btn.press{transform:translate(4px,4px);box-shadow:0 0 0 #111}

const btn = document.getElementById('btn');
setInterval(() => {
  btn.classList.add('press');
  setTimeout(() => btn.classList.remove('press'), 420);
}, 1600);