Typewriter Key
Concave ivory keycap with black ring and serif letter. Click depresses the key 4px with a soft mechanical thud shadow.
Typewriter Key the 16th 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-key">
<span class="btn-key-cap">
<span class="btn-key-letter">RETURN</span>
</span>
</button> .btn-key {
display: inline-block;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
perspective: 200px;
}
.btn-key-cap {
display: inline-flex; align-items: center; justify-content: center;
width: 130px; height: 56px;
background: radial-gradient(ellipse at 50% 30%, #fff8e8 0%, #f0e8d8 60%, #d4c8a8 100%);
border: 3px solid #1a1a1a;
border-radius: 8px;
box-shadow:
inset 0 -8px 12px rgba(0,0,0,0.15),
inset 0 2px 4px rgba(255,255,255,0.6),
0 5px 0 #1a1a1a,
0 8px 14px rgba(0,0,0,0.25);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-key-letter {
font-family: ui-serif, 'Courier New', Georgia, monospace;
font-size: 13px; font-weight: 800;
letter-spacing: 0.16em;
color: #1a1a1a;
}
.btn-key:hover .btn-key-cap {
transform: translateY(-1px);
}
.btn-key:active .btn-key-cap {
transform: translateY(4px);
box-shadow:
inset 0 -2px 6px rgba(0,0,0,0.25),
inset 0 2px 4px rgba(255,255,255,0.4),
0 1px 0 #1a1a1a,
0 2px 4px rgba(0,0,0,0.2);
}