Design for AI

Brilho contínuo

Brilho contínuo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

shineshimmeranimatedgradientloop

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; }
}
HTML
<button class="btn-072">Upgrade</button>
Prompt

Um botão índigo #4f46e5 com texto branco de 14px bold, raio de 10px, padding de 13px por 26px, cujo fundo é um gradiente largo com uma listra fina clara #a5b4fc que desliza sem parar da direita para a esquerda a cada 2.5s, como um shimmer. No hover o shimmer acelera para 1s; no active escala para 97%. Anel de foco índigo translúcido.

Mesma prateleira