CSS
.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);
}