Polaroid Snapshot
A genuine Polaroid frame — square sepia photo on top, the iconic chunky white bottom border with a handwritten caption and date stamp. Tilts casually on hover like it was just dropped on a table.
Polaroid Snapshot the 32nd of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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);
}