All Prompts
All Prompts

buttonctatailwindgradienthoverinteractive
Gradient Call-to-Action Button with Icon
Кнопка CTA с градиентом и иконкой. Стиль Tailwind, с анимацией при наведении. Идеальна для ключевых действий.
Prompt
<button class="group relative">
<!-- Shadow layer -->
<div class="blur-[1px] bg-blue-700 opacity-30 rounded-full absolute top-0 right-0 bottom-0 left-0 translate-y-1.5 blur-md"></div>
<!-- Main Button -->
<div class="hover:to-blue-500 flex gap-6 active:translate-y-[1px] transition-all text-white bg-gradient-to-b from-blue-500 to-blue-600 rounded-full pt-2 pr-2 pb-2 pl-8 relative shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_1px_2px_rgba(0,0,0,0.1)] gap-x-6 gap-y-6 items-center">
<span class="text-base font-medium">Deploy Application</span>
<div class="bg-white rounded-full p-1.5 shadow-sm group-hover:scale-105 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 text-blue-600 stroke-[2.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</div>
</div>
</button>