<button class="btn-polar">
  <span class="btn-polar-photo" aria-hidden="true">
    <span class="btn-polar-glare" aria-hidden="true"></span>
  </span>
  <span class="btn-polar-caption">
    <span class="btn-polar-text">Save to album</span>
    <span class="btn-polar-date">'89 · 03/24</span>
  </span>
</button>

.btn-polar {
  position: relative;
  padding: 8px 8px 0;
  border: none;
  background: #fff8e7;
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 0;
  width: 156px;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.35),
    0 1px 0 rgba(112,72,48,0.1) inset;
  transition: transform 0.3s cubic-bezier(.3,1,.3,1), box-shadow 0.3s ease;
  transform: rotate(-1.5deg);
}
.btn-polar-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 25%, #ffd089 0%, transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.25), transparent 50%),
    linear-gradient(135deg, #fcb938 0%, #b87333 50%, #5a3010 100%);
  filter: sepia(0.35) saturate(1.2) contrast(1.05);
  overflow: hidden;
}
.btn-polar-glare {
  position: absolute;
  top: -10%; left: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.4), transparent 60%);
  pointer-events: none;
}
.btn-polar-caption {
  /* The iconic chunky bottom border */
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 10px 22px;
  gap: 4px;
}
.btn-polar-text {
  font-family: 'Caveat', 'Comic Sans MS', cursive, ui-serif;
  font-size: 16px; font-weight: 600;
  color: #3a2410;
  letter-spacing: 0.02em;
  line-height: 1;
}
.btn-polar-date {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #b87333;
}
.btn-polar:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}