Input by AKAspidey01
#e8e8e8
HTML +TailwindCSS
1<div class="relative rounded-full overflow-hidden bg-white shadow-xl w-3/4"> 2 <input 3 type="text" 4 name="text" 5 placeholder="Hover on Submit" 6 class="input bg-transparent outline-none border-none pl-6 pr-10 py-5 w-full font-sans text-lg font-semibold" 7 /> 8 <div class="absolute right-2 top-[0.4em]"> 9 <button 10 class="w-14 h-14 rounded-full bg-violet-500 group shadow-xl flex items-center justify-center relative overflow-hidden" 11 > 12 <svg 13 width="50" 14 height="50" 15 viewBox="0 0 64 64" 16 fill="none" 17 xmlns="http://www.w3.org/2000/svg" 18 class="relative z-10" 19 > 20 <path 21 d="M63.6689 29.0491L34.6198 63.6685L0.00043872 34.6194L29.0496 1.67708e-05L63.6689 29.0491Z" 22 fill="white" 23 fill-opacity="0.01" 24 ></path> 25 <path 26 d="M42.8496 18.7067L21.0628 44.6712" 27 stroke="white" 28 stroke-width="3.76603" 29 stroke-linecap="round" 30 stroke-linejoin="round" 31 ></path> 32 <path 33 d="M26.9329 20.0992L42.85 18.7067L44.2426 34.6238" 34 stroke="white" 35 stroke-width="3.76603" 36 stroke-linecap="round" 37 stroke-linejoin="round" 38 ></path> 39 </svg> 40 <div 41 class="w-full h-full rotate-45 absolute left-[32%] top-[32%] bg-black group-hover:-left-[100%] group-hover:-top-[100%] duration-1000" 42 ></div> 43 <div 44 class="w-full h-full -rotate-45 absolute -left-[32%] -top-[32%] group-hover:left-[100%] group-hover:top-[100%] bg-black duration-1000" 45 ></div> 46 </button> 47 </div> 48</div> 49
301 views
301 views
MIT License