# Continuous shimmer (B 072)

Category: Buttons  
Tags: shine, shimmer, animated, gradient, loop  
Page: https://designforai.dev/snippet/btn-072

## Prompt

An indigo #4f46e5 button with white 14px bold text, 10px radius, 13px by 26px padding, whose background is a wide gradient with a thin pale #a5b4fc stripe that slides continuously from right to left every 2.5s like a shimmer. Hovering speeds the shimmer to 1s; active scales to 97%. Focus ring translucent indigo.

## HTML

```html
<button class="btn-072">Upgrade</button>
```

## CSS

```css
.btn-072 {
  font: 700 14px/1 system-ui,sans-serif;
  color: #fff;
  background: linear-gradient(110deg,#4f46e5 40%,#a5b4fc 50%,#4f46e5 60%);
  background-size: 250% 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 26px;
  cursor: pointer;
  animation: btn-072-s 2.5s linear infinite;
  transition: transform .15s
}
@keyframes btn-072-s {
  0% {
    background-position: 100% 0
  }
  100% {
    background-position: -100% 0
  }
}
.btn-072:hover {
  animation-duration: 1s
}
.btn-072:focus-visible {
  outline: 3px solid rgba(79,70,229,.5);
  outline-offset: 2px
}
.btn-072:active {
  transform: scale(.97)
}
@media (prefers-reduced-motion: reduce) {
  .btn-072, .btn-072 * { animation: none; transition: none; }
}
```