VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient Sign In Button with Icon (Tailwind) preview
buttontailwindgradienticoninteractiveauthfull-widthhover

Gradient Sign In Button with Icon (Tailwind)

Кнопка входа с иконкой и градиентом. Tailwind CSS. Для аутентификации и CTA.

Prompt

<button type="submit" class="w-full inline-flex gap-2 shadow-[inset_0_-2px_25px_-4px_rgba(255,255,255,0.2)] ring-1 ring-white/10 hover:ring-gray-300/40 hover:from-gray-600 hover:to-gray-500 hover:shadow-lg transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60 text-sm font-medium text-white bg-gradient-to-r from-gray-700 to-gray-600 rounded-lg pt-2.5 pr-4 pb-2.5 pl-4 items-center justify-center max-w-sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-in-icon lucide-log-in" style="width: 16px; height: 16px; color: rgb(255, 255, 255);">
    <path d="m10 17 5-5-5-5" class=""></path>
    <path d="M15 12H3" class=""></path>
    <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path>
  </svg>
  Sign in
</button>
All Prompts