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 from-gray-800 bg-[#316FF6] 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="1.1em" 10 viewBox="0 0 448 512" 11 stroke-width="0" 12 fill="currentColor" 13 stroke="currentColor" 14 class="w-5" 15 > 16 <path 17 d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-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 Facebook 24 </span> 25 </button> 26</section> 27
1.1K views
Variation of atooltip
MIT License