Загрузка...

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