# Fortschrittsbalken-Füllung (B 084)

Kategorie: Buttons  
Tags: loading, progress, animated-fill, outline  
Seite: https://designforai.dev/de/snippet/btn-084

## Prompt

Ein blassgrüner Loading-Button (#ecfdf5 Füllung, 1px Rahmen #6ee7b7, dunkelgrüner Text #065f46 in 14px semibold, 8px Radius, 12px mal 24px Padding, disabled), bei dem ein Mint-Balken #a7f3d0 in 2.4s von der linken Kante auf volle Breite wächst, ausblendet und wiederholt, hinter dem Text "Uploading".

## HTML

```html
<button class="btn-084" disabled><span>Uploading</span></button>
```

## CSS

```css
.btn-084 {
  position: relative;
  overflow: hidden;
  font: 600 14px/1 system-ui,sans-serif;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 12px 24px;
  cursor: progress
}
.btn-084::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: #a7f3d0;
  animation: btn-084-p 2.4s ease-in-out infinite
}
@keyframes btn-084-p {
  0% {
    width: 0
  }
  70% {
    width: 100%
  }
  100% {
    width: 100%;
    opacity: 0
  }
}
.btn-084 span {
  position: relative
}
.btn-084:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 3px
}
@media (prefers-reduced-motion: reduce) {
  .btn-084, .btn-084 * { animation: none; transition: none; }
}
```