# Pulsación caramelo (B 051)

Categoría: Botones  
Etiquetas: 3d, press-down, rounded, bottom-edge  
Página: https://designforai.dev/es/snippet/btn-051

## Prompt

Un botón 3D estilo caramelo: cara superior verde #22c55e, texto blanco de 16px en negrita, radio de 12px, padding de 14px por 32px, con un canto inferior sólido de 6px en verde más oscuro #15803d (box-shadow 0 6px 0) más una sombra suave. Al pasar el cursor se aclara ligeramente; al pulsar el botón baja 6px y el canto se reduce a cero. Outline de foco de 3px verde oscuro.

## HTML

```html
<button class="btn-051">Play</button>
```

## CSS

```css
.btn-051 {
  font: 700 16px/1 system-ui,sans-serif;
  color: #fff;
  background: #22c55e;
  border: 0;
  border-radius: 12px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: 0 6px 0 #15803d,0 8px 12px rgba(0,0,0,.2);
  transition: transform .08s,box-shadow .08s
}
.btn-051:hover {
  background: #26d162
}
.btn-051:focus-visible {
  outline: 3px solid #15803d;
  outline-offset: 3px
}
.btn-051:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #15803d,0 1px 3px rgba(0,0,0,.2)
}
```