# Ghost Leuchtkante (B 110)

Kategorie: Buttons  
Tags: glow, outline, rounded, subtle, light-background  
Seite: https://designforai.dev/de/snippet/btn-110

## Prompt

Ein ruhiger weißer Button mit 1px Lavendel-Rahmen #c7d2fe, 8px Radius, Indigo #4f46e5 14px medium Text, 12px mal 22px Padding. Beim Hover wird der Rahmen #6366f1 und ein Indigo-Leuchten erscheint: ein 4px halbtransparenter Ring plus ein 18px weicher Halo, in 300ms eingeblendet. Fokus nutzt denselben Ring mit höherer Opacity statt einer Outline; active tönt den Hintergrund #eef2ff.

## HTML

```html
<button class="btn-110">Preview</button>
```

## CSS

```css
.btn-110 {
  font: 500 14px/1 system-ui,sans-serif;
  color: #4f46e5;
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 0 0 0 #6366f100;
  transition: box-shadow .3s,border-color .3s,background .3s
}
.btn-110:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px #6366f122,0 0 18px #6366f166
}
.btn-110:focus-visible {
  outline: 2px solid transparent;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px #6366f155
}
.btn-110:active {
  background: #eef2ff;
  box-shadow: 0 0 0 2px #6366f133
}
```