Skip to content

Instantly share code, notes, and snippets.

@nihat-js
Created January 5, 2025 08:02
Show Gist options
  • Select an option

  • Save nihat-js/449fc8c825fa28143eff6e7ad48b738d to your computer and use it in GitHub Desktop.

Select an option

Save nihat-js/449fc8c825fa28143eff6e7ad48b738d to your computer and use it in GitHub Desktop.
<div class="w-full flex justify-between mt-8 gap-5">
<button class="group/button relative overflow-hidden rounded-md bg-secondary px-4 py-1 text-xs font-medium text-red-500 transition-all duration-150 hover:border-red-500 active:scale-95 w-full"><a href="https://youtu.be/U9XuioCIbFE" target="_blank"><span class="absolute bottom-0 left-0 z-0 h-0 w-full bg-gradient-to-t from-red-600 to-red-500 transition-all duration-500 group-hover/button:h-full"></span><span class="relative z-10 transition-all duration-500 group-hover/button:text-white w-full flex justify-center"><div class="flex flex-col items-center"><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" class="lucide lucide-youtube"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg><p>YouTube</p></div></span></a></button><a class="group/button relative overflow-hidden rounded-md bg-secondary px-4 text-xs font-medium text-orange-500 transition-all duration-150 hover:border-orange-500 active:scale-95 w-full py-5" href="/login?redirectTo=/courses/create-a-reddit-clone-with-next-js-14-kinde-supabase-uploadthing-prisma-and-tailwind"><span class="absolute bottom-0 left-0 z-0 h-0 w-full bg-gradient-to-t from-orange-600 to-orange-500 transition-all duration-500 group-hover/button:h-full"></span><span class="relative z-10 transition-all duration-500 group-hover/button:text-white text-center w-full flex justify-center"><div class="flex flex-col items-center"><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" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg><p>Github</p></div></span></a></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment