buttonctagradienthovertailwindinteractiveresponsiveelevated

Gradient Sign-Up CTA Button with Hover Lift

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

Live Preview

Prompt

<button type="button" role="button" aria-label="Sign up" class="group relative inline-flex shadow-[0_15px_30px_-5px_rgba(151,65,252,0.2)] hover:shadow-[0_20px_40px_-8px_rgba(151,65,252,0.28)] 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-lg pt-[3px] pr-[3px] pb-[3px] pl-[3px] items-center justify-center" style="background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%, #00DDEB);">
      <span class="flex items-center justify-center gap-3 text-[20px] md:text-[24px] leading-none min-w-[140px] md:min-w-[196px] w-full h-full transition-colors duration-300 group-hover:bg-transparent font-semibold tracking-tight bg-[#0b0f17] rounded-md pt-4 pr-6 pb-4 pl-6">
        
        <span class="">Sign up</span>
      </span>
    </button>

All Prompts