How to make a button a linear gradient color border in tailwind css?

I am trying Nextjs and tailwind css i created a simple page with that but now i am facing a problem that i want to make the button a linear gradient color border in tailwind css how can i do that with my code?

     <Link href={'/about'}>
        <button className="bg-black-500 hover:bg-blue-700 mt-5 text-white font-bold py-2 px-4 rounded-full border border-blue-500 shadow-md transition duration-300 ease-in-out transform hover:scale-105">
          Learn More
        </button>
      </Link>

Solution

Here is the code to make your button's background into a linear gradient:

    <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold py-2 px-4 rounded">
      Gradient Button
    </button>

You can find the detailed explanation about the tailwind CSS linear gradient classes here https://tailwindcss.com/docs/background-image#linear-gradients

If you want to make it look like it has its border as the linear gradient color then you can try something like this:

<button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded p-1">
  <span class="flex w-full bg-gray-900 text-white rounded p-2">
  Gradient border
     </span>
</button>

It needs you to create another element inside it which will take the background color of the parent container where it resides and our main button will have a full bg gradient. That will create an illusion of having a border gradient. I am sure there might be other ways, including using pseudo-elements to create this effect.