buttonctaanimatedgradienttailwindinteractive

Animated Gradient Border CTA Button

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

Live Preview

Prompt

<button class="inline-flex overflow-hidden focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 btn-magnetic h-12 rounded-full pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative">
          <span class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]"></span>
          <span class="inline-flex cursor-pointer items-center justify-center transition-colors hover:bg-slate-950/80 text-sm font-medium text-white bg-slate-950 w-full h-full rounded-full pt-1 pr-8 pb-1 pl-8 backdrop-blur-3xl">
            Join Waitlist
          </span>
        </button>

All Prompts