Button by eduardo-amaro-maciel
This button was created for Button Frenzy: Tailwind Edition
#e8e8e8
HTML +TailwindCSS
1<button class="btn group flex items-center bg-transparent p-2 px-6 text-xl font-thin tracking-widest text-white"> 2 <span class="relative pr-4 pb-1 text-black after:transition-transform after:duration-500 after:ease-out after:absolute after:bottom-0 after:left-0 after:block after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-blue-500 after:content-[''] after:group-hover:origin-bottom-left after:group-hover:scale-x-100">Hover Me</span> 3 <svg class="-translate-x-2 fill-slate-700 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:scale-x-105 group-hover:fill-blue-500" id="arrow-horizontal" xmlns="http://www.w3.org/2000/svg" width="30" height="10" viewBox="0 0 46 16"> 4 <path id="Path_10" data-name="Path 10" d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z" transform="translate(30)"></path> 5 </svg> 6</button>
604 views
604 views
MIT License