javascript 如何使一个按钮的线性渐变颜色边界在顺风css？

r6l8ljro 于 2023-06-20 发布在 Java

关注(0)|答案(2)|浏览(133)

我正在尝试Nextjs和tailwind css，我用它创建了一个简单的页面，但现在我面临一个问题，我想让按钮在tailwind css中成为线性渐变颜色边框，我该如何用我的代码做到这一点？

<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

来源：https://stackoverflow.com/questions/76499537/how-to-make-a-button-a-linear-gradient-color-border-in-tailwind-css

2条答案

按热度按时间

v64noz0r1#

这可以很容易地通过使用bg-gradient-to类与from和to颜色来完成。
例如：

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

赞(0）回复(0）举报 2023-06-20

gojuced72#

下面是将按钮的背景设置为线性渐变的代码：

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

你可以在这里找到关于顺风CSS线性渐变类的详细解释https://tailwindcss.com/docs/background-image#linear-gradients
如果你想让它看起来像它的边界作为线性渐变颜色，那么你可以尝试这样做：

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

它需要你在里面创建另一个元素，它将采用它所在的父容器的背景颜色，我们的主按钮将有一个完整的bg渐变。这将创建一个具有边界渐变的错觉。我相信可能还有其他方法，包括使用伪元素来创建这种效果。

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 如何使一个按钮的线性渐变颜色边界在顺风css？

2条答案

相关问题

热门标签

最新问答