Tooltip by akshat-patel28
#e8e8e8
HTML +TailwindCSS
1<section class="flex justify-center items-center"> 2 <button 3 href="/" 4 class="group flex justify-center p-2 rounded-md drop-shadow-xl bg-[#CD201F] from-gray-800 text-white font-semibold hover:translate-y-3 hover:rounded-[50%] transition-all duration-500 hover:from-[#331029] hover:to-[#310413]" 5 > 6 <svg 7 xmlns="http://www.w3.org/2000/svg" 8 width="1em" 9 height="1em" 10 viewBox="0 0 576 512" 11 stroke-width="0" 12 fill="currentColor" 13 stroke="currentColor" 14 > 15 <path 16 d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" 17 ></path> 18 </svg> 19 <span 20 class="absolute opacity-0 group-hover:opacity-100 group-hover:text-gray-700 group-hover:text-sm group-hover:-translate-y-10 duration-700" 21 > 22 Youtube 23 </span> 24 </button> 25</section> 26
744 views
Variation of atooltip
MIT License