# Asymmetrischer Radius (B 023)

Kategorie: Buttons  
Tags: rounded, solid, asymmetric, playful  
Seite: https://designforai.dev/de/snippet/btn-023

## Prompt

Ein verspielter oranger Button #ea580c mit weißem Text 15px bold, 13px mal 26px Padding und asymmetrischen Ecken: 20px oben links und unten rechts, 6px oben rechts und unten links. Beim Hover kippt das Eckenmuster (6/20/6/20) und die Farbe geht auf #c2410c; active wird einheitlich 12px bei #9a3412. Fokusring halbtransparentes Orange.

## HTML

```html
<button class="btn-023">Let's go</button>
```

## CSS

```css
.btn-023 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #ea580c;
  border: 0;
  border-radius: 20px 6px 20px 6px;
  padding: 13px 26px;
  cursor: pointer;
  transition: border-radius .25s,background .2s
}
.btn-023:hover {
  border-radius: 6px 20px 6px 20px;
  background: #c2410c
}
.btn-023:focus-visible {
  outline: 3px solid rgba(234,88,12,.45);
  outline-offset: 2px
}
.btn-023:active {
  border-radius: 12px;
  background: #9a3412
}
```