我需要一个简单的按钮与 colored颜色 渐变和一个透明的渐变叠加伪装灯光眩光.在过go ，我只创建了 colored颜色 渐变(red to dark red)的按钮，并在按钮上设置了一个透明渐变(white, with opacity 0.25 to 0.50)的层.
Like this Button:
But I have big problem with a concave horizon line:
我在这里标了一条理论上的线，只是为了更好地理解.
Tryout code on fiddle:
I've been experimenting a bit with concave background settings here. But then I get no transparent history.
#wrapper {
background: grey;
padding: 25px;
}
#test {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 25px;
border-radius: 20px;
background: #888888;
background:
radial-gradient(circle 400px at 50% 266%, rgba(0,0,250,0.1), rgba(0,0,250,0.1) 100%, red 100%);
background-size:200px 200px, 200px 200px;
background-position:0 0,0 0;
background-repeat:no-repeat;
}<div id="wrapper">
<div id="test">B1</div>
<div id="test">B2</div>
</div>但我的CSS2技能完全过时了. 因此，我的财务按钮是否有更好的解决方案就成了问题.
有人知道如何创建这样一个按钮(like the red one in the first picture)吗？现在可能会有更现代、更简单的解决方案.-重要的是，地平线是concave (laterally downwards)，而不是凸(ellipse downwards in the middle).完全如图所示.
为了提高我的技能，我必须与更多的css-3和最新技术打交道.