buttontailwindgradienthoveranimatedcall-to-actioncta

Gradient Hover Sign-Up Button

Кнопка регистрации с градиентным эффектом при наведении. Интерактивный CTA-элемент с анимацией. Идеально для форм входа и призыва к действию.

Live Preview

Prompt

<button type="button" role="button" aria-label="Sign up" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(255,255,255,0.05)] hover:shadow-[0_12px_20px_-6px_rgba(255,255,255,0.1)] transition duration-300 ease-out select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 transform-gpu hover:-translate-y-0.5 text-white rounded-md pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background-image: linear-gradient(144deg,rgba(255,255,255,0.3), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));">
  <span class="flex items-center justify-center gap-2 text-[15px] leading-none min-w-[90px] w-full h-full transition-colors duration-300 group-hover:bg-black/50 font-medium bg-black/80 rounded-md pt-3 pr-5 pb-3 pl-5">
    <span class="">Sign up</span>
  </span>
</button>

All Prompts