VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient CTA Button with Leading & Trailing Icons preview
buttonctatailwindgradienthoverinteractiveiconsresponsive

Gradient CTA Button with Leading & Trailing Icons

Кнопка CTA с градиентом и иконками. Адаптивный UI-компонент на Tailwind CSS для привлечения внимания на лендингах.

Prompt

<a href="#"
  class="inline-flex items-center justify-center gap-2 transition-all hover:scale-105 hover:shadow-lg shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full pt-4 pr-8 pb-4 pl-8"
  style="" title="Link disabled in preview mode">
  <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="play-circle"
    class="lucide lucide-play-circle w-5 h-5" style="stroke-width: 1.5;">
    <path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"></path>
    <circle cx="12" cy="12" r="10"></circle>
  </svg>
  Start Training Free
  <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" style="stroke-width: 1.5;">
    <path d="M5 12h14"></path>
    <path d="m12 5 7 7-7 7"></path>
  </svg>
</a>
All Prompts