VibeCoderzVibeCoderz
Telegram
All Prompts
Glowing Gradient CTA Button preview
buttonctagradientanimatedinteractivetailwind

Glowing Gradient CTA Button

Светящаяся кнопка CTA с градиентом и анимацией. Интерактивный UI-компонент для современных лендингов, созданный с помощью Tailwind CSS.

Prompt

<button class="group flex overflow-hidden transition-all duration-300 hover:scale-[1.03] hover:shadow-[0_0_70px_-12px_#f97316] active:scale-[0.98] z-10 text-lg font-semibold text-white bg-black h-14 ring-white/20 ring-1 rounded-full px-10 relative shadow-[0_0_50px_-12px_#f97316] gap-x-2 gap-y-2 items-center justify-center">
    <div class="absolute inset-0 bg-gradient-to-r from-yellow-500 via-orange-600 to-red-600 opacity-80 transition-opacity duration-300 group-hover:opacity-100"></div>

    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.2),transparent_50%)] mix-blend-overlay"></div>
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,rgba(255,255,255,0.2),transparent_50%)] mix-blend-overlay"></div>

    <div class="transition-all duration-300 group-hover:border-white/70 group-hover:shadow-[inset_0_0_20px_rgba(255,255,255,0.7)] border-white/50 border rounded-full absolute top-0 right-0 bottom-0 left-0 shadow-[inset_0_0_15px_rgba(255,255,255,0.5)]"></div><div class="transition-all duration-300 group-hover:border-white/70 group-hover:shadow-[inset_0_0_20px_rgba(255,255,255,0.7)] border-white/50 border rounded-full absolute top-0 right-0 bottom-0 left-0 shadow-[inset_0_0_15px_rgba(255,255,255,0.5)]"></div>

    <span class="flex items-center gap-2 leading-none z-10 relative drop-shadow-md">Explore Yuna</span>
  </button>
All Prompts