buttonctatailwindgradienthoveranimatedaccessibleshadow

Gradient CTA Button with Multicolor Border

Анимированная кнопка CTA с градиентной рамкой, эффектом при наведении и тенями. Создана на Tailwind CSS для основных действий.

Live Preview

Prompt

<button type="button" role="button" aria-label="Sign up" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(151,65,252,0.2)] hover:shadow-[0_12px_20px_-6px_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-md pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%, #00DDEB);">
      <span class="flex items-center justify-center gap-2 text-[14px] leading-none min-w-[80px] w-full h-full transition-colors duration-300 group-hover:bg-transparent font-medium bg-[#0b0f17] rounded-md pt-2 pr-4 pb-2 pl-4">
        <span class="">Sign up</span>
      </span>
    </button>

All Prompts