我需要帮助了解如何使用 CSS 将渐变着色应用于按钮

Question

这是我需要创建的按钮，但我不知道如何对其应用多种颜色和阴影效果。制作此按钮时使用的颜色如下：

• 柠檬绿：hsl(136, 65%, 51%)
• 亮青色：hsl(192, 70%, 51%)

附注您还可以提供有关如何为此按钮添加悬停效果的指导吗？

Answer 1

试试这个。

        .rounded-button {
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            color: #fff;
            background: linear-gradient(90deg, hsl(136, 65%, 51%), hsl(192, 70%, 51%));
            border: none;
            border-radius: 50px; /* Adjust the border-radius for the degree of roundness you want */
            cursor: pointer;
        }

        .rounded-button:hover {
            background: linear-gradient(90deg, hsl(192, 70%, 51%), hsl(136, 65%, 51%));
        }

<button class="rounded-button">Request Invite</button>