如何在Tailwind CSS中为Next.js按钮添加线性渐变边框？

直接修改你的代码，通过外层渐变背景+内边距模拟边框的方式实现渐变圆角边框，以下是调整后的完整代码：

<Link href={'/about'}>
  <button className="mt-5 rounded-full p-[1px] bg-gradient-to-r from-blue-500 to-purple-600 shadow-md transition duration-300 ease-in-out transform hover:scale-105">
    <span className="block bg-black-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
      Learn More
    </span>
  </button>
</Link>

关键修改点说明： #

• 移除原按钮的border border-blue-500，改用外层按钮的渐变背景+1px内边距模拟边框（p-[1px]的数值可根据需求调整边框厚度）
• 外层按钮通过bg-gradient-to-r from-blue-500 to-purple-600定义渐变方向和颜色，你可以替换成任意Tailwind支持的渐变组合（比如from-teal-400 to-blue-500）
• 内层span保留原按钮的背景色、文字样式和hover效果，同时设置rounded-full保证和外层圆角完全匹配
• 原有的过渡、缩放、阴影等交互效果全部保留

可选优化（hover时边框渐变同步变化）： #

给外层按钮添加hover态的渐变效果，示例：

<button className="mt-5 rounded-full p-[1px] bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 shadow-md transition duration-300 ease-in-out transform hover:scale-105">

内容的提问来源于stack exchange，提问作者cwecae