Button by Creatlydev
This button was created for Button Frenzy: Tailwind Edition
#212121
HTML +TailwindCSS
1<button class="shadow shadow-red-300 cursor-pointer overflow-hidden text-white bg-red-600 px-4 py-3 group active:shadow-green-200 focus:outline-none rounded flex items-center justify-center relative gap-4"> 2 3 <span class="group-hover:-translate-x-40 transition-transform duration-200">REMOVE</span> 4 5 <div class="w-0.5 h-6 bg-red-800 group-hover:-translate-x-40 transition-transform duration-200"></div> 6 7 <div class="svg-wrapper group-hover:-translate-x-11 transition-transform duration-200"> 8 <svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 9 <path d="M6 18L18 6M6 6l12 12" stroke-linejoin="round" stroke-linecap="round"></path> 10</svg> 11 </div> 12 13 <div class="svg-wrapper group-active:bg-green-600 group-active:flex hidden absolute w-full h-full flex items-center justify-center"> 14 <svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 15 <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path> 16</svg> 17 18 </div> 19 20</button>
650 views
650 views
MIT License