All Prompts
All Prompts

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 > body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > 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 > body:nth-of-type(1) > main:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > button:nth-of-type(1) > 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>