buttonctagradienticontailwindinteractive

Gradient Pill Button with Icon

Кнопка-таблетка с градиентом и иконкой. UI компонент для CTA-элементов (демо, бенчмарк). Tailwind CSS.

Prompt



<button class="group hover:from-indigo-500/50 hover:to-purple-500/50 transition-all duration-300 bg-gradient-to-b from-white/20 to-white/0 rounded-full pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative gap-x-3 gap-y-3">
             <div class="flex gap-3 z-10 hover:bg-[#161616] transition-colors bg-[#111] rounded-full pt-3 pr-6 pb-3 pl-4 relative gap-x-3 gap-y-3 items-center">
                 <div class="w-8 h-8 bg-white/10 rounded-full flex items-center justify-center text-white">
                      <iconify-icon icon="solar:play-bold-duotone" width="16" height="16"></iconify-icon>
                 </div>
                 <span class="text-sm font-semibold text-white">See the Benchmark</span>
             </div>
          </button>

All Prompts