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>

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>

• javascript
• reactjs
• next.js
• tailwind-css

• 1 Here is an example of a gradient border: dhairyashah.dev/posts/… – Brijesh Bhakta Commented Jun 18, 2023 at 7:58
• @BrijeshBhakta Can you please give me a simple code example? i saw that blog post how to do things in my code please? – cwecae Commented Jun 18, 2023 at 8:08

3 Answers 3

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./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.

This worked for me

<script src="https://cdn.tailwindcss."></script>
<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>

This can be easily done by using bg-gradient-to class with from and to colors.

For example :

<Link href="/about">
  <button className="relative mt-5 text-white font-bold py-2 px-4 rounded-full overflow-hidden shadow-md transition duration-300 ease-in-out transform hover:scale-105">
    <span className="relative z-10">Learn More</span>
    <span className="absolute inset-0 bg-gradient-to-r from-blue-500 to-green-500 border-2 border-transparent rounded-full"></span>
  </button>
</Link>