# Keycap (B 052)

Kategorie: Buttons  
Tags: 3d, press-down, keyboard, square  
Seite: https://designforai.dev/de/snippet/btn-052

## Prompt

Ein Tastenkappen-Button: vertikaler Verlauf von Weiß nach #f3f4f6, 1px Rahmen #d1d5db, 6px Radius, grauer Text #374151 in 13px semibold, 10px mal 18px Padding, eine 3px massive #9ca3af Unterkante und ein kleiner Drop-Shadow. Beim Drücken fährt er 3px nach unten und die Kante verschwindet. Fokus-Outline 2px Grau.

## HTML

```html
<button class="btn-052">Enter</button>
```

## CSS

```css
.btn-052 {
  font: 600 13px/1 system-ui,sans-serif;
  color: #374151;
  background: linear-gradient(180deg,#fff,#f3f4f6);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 #9ca3af,0 4px 6px rgba(0,0,0,.15);
  transition: transform .06s,box-shadow .06s
}
.btn-052:hover {
  background: #fff
}
.btn-052:focus-visible {
  outline: 2px solid #374151;
  outline-offset: 3px
}
.btn-052:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #9ca3af,0 1px 2px rgba(0,0,0,.15)
}
```