Button by Jules-gitclerc
#212121
HTML +TailwindCSS
1<div class="w-full h-40 flex items-center justify-center cursor-pointer"> 2 <div 3 class="relative inline-flex items-center justify-start py-3 pl-4 pr-12 overflow-hidden font-semibold shadow text-indigo-600 transition-all duration-150 ease-in-out rounded hover:pl-10 hover:pr-6 bg-gray-50 dark:bg-gray-700 dark:text-white dark:hover:text-gray-200 dark:shadow-none group" 4 > 5 <span 6 class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-indigo-600 group-hover:h-full" 7 ></span> 8 <span 9 class="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12" 10 > 11 <svg 12 xmlns="http://www.w3.org/2000/svg" 13 viewBox="0 0 24 24" 14 stroke="currentColor" 15 fill="none" 16 class="w-5 h-5 text-green-400" 17 > 18 <path 19 d="M14 5l7 7m0 0l-7 7m7-7H3" 20 stroke-width="2" 21 stroke-linejoin="round" 22 stroke-linecap="round" 23 ></path> 24 </svg> 25 </span> 26 <span 27 class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200" 28 > 29 <svg 30 xmlns="http://www.w3.org/2000/svg" 31 viewBox="0 0 24 24" 32 stroke="currentColor" 33 fill="none" 34 class="w-5 h-5 text-green-400" 35 > 36 <path 37 d="M14 5l7 7m0 0l-7 7m7-7H3" 38 stroke-width="2" 39 stroke-linejoin="round" 40 stroke-linecap="round" 41 ></path> 42 </svg> 43 </span> 44 <span 45 class="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white dark:group-hover:text-gray-200" 46 >Button</span 47 > 48 </div> 49</div> 50
2.3K views
2.3K views
MIT License