Button by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<button class="group relative w-28 h-12 text-neutral-50 bg-neutral-800 p-2 overflow-hidden"> 2 <p class="absolute font-bold z-10 duration-500"> Button</p> 3 <div class=""> 4 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-0"></div> 5 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 -bottom-16 group-hover:-bottom-1 right-4"></div> 6 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-8"></div> 7 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 -bottom-16 group-hover:-bottom-1 right-12"></div> 8 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-16"></div> 9 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 -bottom-16 group-hover:-bottom-1 right-20"></div> 10 <div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-24"></div> 11 </div> 12 13</button>
390 views
390 views
MIT License