VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient Glow Call-to-Action Button preview
buttonctatailwindanimatedinteractivegradient

Gradient Glow Call-to-Action Button

Кнопка CTA с градиентным свечением и анимацией. Идеальна для первичных действий, использует Tailwind-классы.

Prompt

<button class="group z-10 flex gap-2 overflow-hidden transition-all duration-300 hover:scale-[1.03] hover:shadow-[0_0_70px_-12px_#a855f7] active:scale-[0.98] 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_#a855f7] gap-x-2 gap-y-2 items-center justify-center">
    <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 via-purple-600 to-fuchsia-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>

    <span class="relative z-10 flex items-center gap-2 drop-shadow-md leading-none">
      Start Free Pilot
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1">
        <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path>
        <path d="m21.854 2.147-10.94 10.939" class=""></path>
      </svg>
    </span>
  </button>
All Prompts