如何在单个html元素（即按钮）上添加两种颜色？

所以我有这个按钮，我正在设计，我希望它是这样的-如果你能看到它是红色的颜色，但有不同的红色阴影，从这个元素的下半部分开始

我想问的是，为了达到这个效果，我到底要做些什么

经过几次尝试后，我现在有了：

---

有时候你只需要一个渐变

。按钮{
显示：内联块；
边界半径：10px；
颜色：白色；
填充物：5px10px；
盒影：1px1p3pRGBA（0,0,0,0.4）；
背景：rgb（255,0,0）；
背景：线性梯度（180度，rgba（255,0,0,1）0%，rgba（255,0,0,1）50%，rgba（200,0,0,1）50.1%，rgba（200,0,0,1）100%）；
光标：指针；
}
/*悬停状态*/
.按钮：悬停{
背景：线性梯度（180度，rgba（255,50,50,1）0%，rgba（255,50,50,1）50%，rgba（200,50,50,1）50.1%，rgba（200,50,50,1）100%）；
盒影：0px 0px 1px rgba（0,0,0,0.4）；
}

---

提交▶要执行此操作，只需使用
background:linear-gradient（）


。按钮{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100px；
高度：50px；
颜色：白色；
背景：线性梯度（顶部，绿色50%，红色50%）；
}

提交
可以使用
线性渐变来完成，有关

例如：
按钮{
背景：线性梯度（至底部，#e66465 50%，#9198e5 50%）；
}

点击我
这有助于您实现这一目标。