按钮使用css3背景的条纹背景

Question

是否可以使用具有此类背景的按钮

我只是指每周活动按钮。

我想用css完成它，这样我就可以为其他几个按钮自定义渐变，边框等。

按钮具有线性渐变，内侧和外侧阴影以及右侧的条纹。

我不是要求实际代码。我正在寻找任何可以参考的参考资料。

到目前为止，我已经在按钮上做了一些基本的渐变和背景功能，但这似乎很先进了。

此致

编辑： 我正在寻找一些我可以参考的高级参考指南，更好的视频教程，以便我能理解这个概念。 我是UI新手，主要在服务器端工作。

Answer 1

我认为你正在寻找Ultimate CSS Gradient Generator。在玩了一分钟后，我得到了this jsfiddle。渐变代码：

background: rgb(90,175,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(90,175,244,1) 0%, rgba(30,87,153,1) 55%, rgba(50,14,81,1) 75%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,175,244,1)), color-stop(55%,rgba(30,87,153,1)), color-stop(75%,rgba(50,14,81,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(90,175,244,1) 0%,rgba(30,87,153,1) 55%,rgba(50,14,81,1) 75%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aaff4', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

......它很好地复制了这个渐变。