Question 188864 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search