# Neo-brutal dark (B 049)

Category: Buttons  
Tags: brutalist, neo-brutalist, dark, hard-shadow  
Page: https://designforai.dev/snippet/btn-049

## Prompt

A neo-brutalist button for dark backgrounds (#18181b): off-white #f4f4f5 fill and 3px border, dark 15px bold text, 4px radius, 12px by 26px padding, hard orange #f97316 offset shadow 5px 5px. Hover grows the shadow to 7px; active slides onto it and removes it. Focus outline 3px orange.

## HTML

```html
<div style="background:#18181b;padding:28px"><button class="btn-049">Enter</button></div>
```

## CSS

```css
.btn-049 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #18181b;
  background: #f4f4f5;
  border: 3px solid #f4f4f5;
  border-radius: 4px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #f97316;
  transition: transform .1s,box-shadow .1s
}
.btn-049:hover {
  box-shadow: 7px 7px 0 #f97316
}
.btn-049:focus-visible {
  outline: 3px solid #f97316;
  outline-offset: 4px
}
.btn-049:active {
  transform: translate(5px,5px);
  box-shadow: 0 0 0 #f97316
}
```