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-[#E60023] from-gray-800 to-black 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 448 512" 11 stroke-width="0" 12 class="w-5 h-5" 13 fill="currentColor" 14 stroke="currentColor" 15 > 16 <path 17 d="M448 80v352c0 26.5-21.5 48-48 48H154.4c9.8-16.4 22.4-40 27.4-59.3 3-11.5 15.3-58.4 15.3-58.4 8 15.3 31.4 28.2 56.3 28.2 74.1 0 127.4-68.1 127.4-152.7 0-81.1-66.2-141.8-151.4-141.8-106 0-162.2 71.1-162.2 148.6 0 36 19.2 80.8 49.8 95.1 4.7 2.2 7.1 1.2 8.2-3.3.8-3.4 5-20.1 6.8-27.8.6-2.5.3-4.6-1.7-7-10.1-12.3-18.3-34.9-18.3-56 0-54.2 41-106.6 110.9-106.6 60.3 0 102.6 41.1 102.6 99.9 0 66.4-33.5 112.4-77.2 112.4-24.1 0-42.1-19.9-36.4-44.4 6.9-29.2 20.3-60.7 20.3-81.8 0-53-75.5-45.7-75.5 25 0 21.7 7.3 36.5 7.3 36.5-31.4 132.8-36.1 134.5-29.6 192.6l2.2.8H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z" 18 ></path> 19 </svg> 20 <span 21 class="absolute opacity-0 group-hover:opacity-100 group-hover:text-gray-700 group-hover:text-sm group-hover:-translate-y-10 duration-700" 22 > 23 Pinterest 24 </span> 25 </button> 26</section> 27
552 views
Variation of atooltip
MIT License