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-gradient-to-r 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 24 24" 11 stroke-width="0" 12 fill="currentColor" 13 stroke="currentColor" 14 > 15 <path 16 d="M8 2H1L9.26086 13.0145L1.44995 21.9999H4.09998L10.4883 14.651L16 22H23L14.3917 10.5223L21.8001 2H19.1501L13.1643 8.88578L8 2ZM17 20L5 4H7L19 20H17Z" 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 x 23 </span> 24 </button> 25</section> 26
673 views
Variation of atooltip
MIT License