#0c0a09
1<button class="group relative inline-flex items-center gap-2.5 overflow-hidden rounded-xl bg-linear-to-b from-amber-200 via-amber-400 to-amber-600 px-6 py-3 text-[15px] font-extrabold tracking-wide text-amber-950 shadow-[inset_0_1px_0_#fffbeb,0_0_0_1px_#92400e,0_14px_32px_-10px_#f59e0b] transition duration-300 hover:-translate-y-0.5 hover:shadow-[inset_0_1px_0_#fffbeb,0_0_0_1px_#92400e,0_18px_44px_-8px_#fbbf24] active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-amber-300">2 <span class="brilho pointer-events-none absolute inset-y-0 -left-1/2 w-1/3 -skew-x-12 bg-linear-to-r from-transparent via-white/80 to-transparent"></span>3 <svg class="relative size-5 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:-rotate-12" viewBox="0 0 24 24" fill="#fef3c7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.56 3.27a.5.5 0 0 1 .88 0l2.95 5.6a1 1 0 0 0 1.52.3l4.27-3.67a.5.5 0 0 1 .8.52l-2.83 10.25a1 1 0 0 1-.96.73H5.8a1 1 0 0 1-.95-.73L2.02 6.02a.5.5 0 0 1 .8-.52l4.27 3.67a1 1 0 0 0 1.52-.3z"/><path d="M5 21h14"/></svg>4 <span class="relative">Seja Premium</span>5 <span class="faisca absolute right-1.5 top-1 text-[9px] leading-none text-white">✦</span>6 <span class="faisca f2 absolute bottom-1 left-2 text-[7px] leading-none text-white">✦</span>7</button>