VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient Hover Glow CTA Button preview
buttontailwindcssgradienthoveranimatedcall-to-actioninteractive

Gradient Hover Glow CTA Button

Кнопка CTA с градиентом и эффектом свечения при наведении. Создана на Tailwind CSS для привлечения внимания на лендингах и промо-разделах.

Prompt

<div class="flex items-center justify-center min-h-screen bg-neutral-900">
  <div class="inline-block relative">
    <button
      class="relative text-white px-6 py-3 rounded-full text-base font-medium cursor-pointer focus:outline-none min-w-[180px] h-[48px] shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] transition-all duration-500 ease-in-out hover:-translate-y-[3px]"
      style="background: linear-gradient(45deg, #3B82F6, #8B5CF6, #6D28D9);"
      type="button"
      aria-label="Generate My Code"
      title="Generate My Code"
    >
      <span
        class="transition-opacity duration-500 hover:opacity-70 bg-[#1E1E1E] rounded-full absolute top-[1px] right-[1px] bottom-[1px] left-[1px]"
        style="z-index: 0"
      ></span>
      <span
        class="absolute inset-0 rounded-full opacity-0 transition-opacity duration-500 hover:opacity-100 blur-[20px]"
        style="background: linear-gradient(45deg, #3B82F6, #8B5CF6, #6D28D9); z-index: -1;"
      ></span>
      <span class="flex items-center justify-center gap-2 z-10 relative">
        Generate My Code
      </span>
    </button>
  </div>
</div>
All Prompts