Button by EmaCoto
#e8e8e8
HTML +TailwindCSS
1<button 2 class="rounded-lg relative w-36 h-10 cursor-pointer flex items-center border border-green-500 bg-green-500 group hover:bg-green-500 active:bg-green-500 active:border-green-500" 3> 4 <span 5 class="text-gray-200 font-semibold ml-8 transform group-hover:translate-x-20 transition-all duration-300" 6 >Add Item</span 7 > 8 <span 9 class="absolute right-0 h-full w-10 rounded-lg bg-green-500 flex items-center justify-center transform group-hover:translate-x-0 group-hover:w-full transition-all duration-300" 10 > 11 <svg 12 class="svg w-8 text-white" 13 fill="none" 14 height="24" 15 stroke="currentColor" 16 stroke-linecap="round" 17 stroke-linejoin="round" 18 stroke-width="2" 19 viewBox="0 0 24 24" 20 width="24" 21 xmlns="http://www.w3.org/2000/svg" 22 > 23 <line x1="12" x2="12" y1="5" y2="19"></line> 24 <line x1="5" x2="19" y1="12" y2="12"></line> 25 </svg> 26 </span> 27</button> 28
1.7K views
1.7K views
MIT License