#fef3c7
1<button class="group flex items-center gap-4 rounded-full bg-stone-900 py-2 pl-6 pr-2 font-semibold text-amber-50 shadow-lg shadow-stone-900/30 transition hover:bg-stone-800 active:scale-95">2 <span class="transition-transform duration-300 group-hover:-translate-x-1">Comprar agora</span>3 <span class="relative grid size-10 place-items-center overflow-hidden rounded-full bg-amber-300 text-stone-900">4 <svg class="size-5 transition-transform duration-500 group-hover:translate-x-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>5 <svg class="absolute inset-0 m-auto size-5 -translate-x-10 transition-transform duration-500 group-hover:translate-x-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>6 </span>7</button>