버튼에 gradient주기(feat. tailwind)

<input
     type="text"
     className="w-[300px] text-sm font-medium px-5 py-2.5 pl-11 focus:outline-none rounded-lg rounded-r-none border border-slate-300"
></input>
<button
     type="submit"
     className="bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg rounded-l-none text-white text-sm px-5 py-[10.5px] text-center"
>
     레시피검색
</button>

예뻐서 마음에 드는데 디자이너님이 조화가 안된다고 안쓰신다고 한다
ㅜ