VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient Hover CTA Button with Arrow Icon preview
buttonctatailwindgradientanimatediconhoverresponsive

Gradient Hover CTA Button with Arrow Icon

Анимированная кнопка CTA с градиентом и иконкой стрелки. Идеальна для лендингов, секций и форм.

Prompt

<button class="inline-flex hover:-translate-y-0.5 transition will-change-transform bg-gradient-to-r from-[#2A2DFE] via-[#4338CA] to-[#7C3AED] rounded-full px-[2px] py-[2px] relative shadow-[0_0_48px_rgba(67,56,202,0.45)] items-center" data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; button:nth-of-type(1)">
                  <span class="z-0 inline-flex items-center justify-between gap-4 leading-[1] text-lg font-semibold text-white tracking-tight rounded-full pt-3.5 pr-6 pb-3.5 pl-6 relative" style="background: linear-gradient(90deg,#2A2DFE 0%, #4338CA 50%, #7C3AED 100%);
             box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.25);" data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; button:nth-of-type(1) &gt; span:nth-of-type(1)">
                    <span class="pointer-events-none absolute inset-0 rounded-full" style="background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 60%); mix-blend: screen;"></span>
                    <span class="z-10 relative">Get Started</span>
                    <span class="relative z-10 inline-flex items-center justify-center w-8 h-8 rounded-xl bg-white/10 ring-1 ring-white/10">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14" class=""></path>
                        <path d="m12 5 7 7-7 7" class=""></path>
                      </svg>
                    </span>
                  </span>
                </button>
All Prompts