html - 带有 2 个渐变按钮的 CSS？

Question

下面是我们在网站上使用的按钮的图像，它是一个 .png。

我们想看看我们是否可以在标准按钮上使用 CSS 来真正接近它。

渐变到顶部：#E14C5B 到中间：#D33742 到底部：#B61C27 带有几个像素径向圆角。

这在 CSS 中是否可行？

Answer 1

这是使用 css 渐变的跨浏览器版本。我为渐变指定了 4 种颜色。第一个梯度从 0 到 50%，第二个梯度从 51% 到 100%。

前任。

background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);

jsfiddle 演示在这里

请注意，我拍摄的红色比旅行示例中的要亮。只需使用 css 来调整适合您需要的颜色。

Answer 2

我会让你开始...

HTML

<button>Submit</button>

带有一些背景渐变的 CSS

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 1.5em;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    border: 1px solid transparent;
    border-radius: 3px;
    height: 50px;
    width: 100px;
    color: white;
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

演示

截屏：

如果您想在点击时查看某种点击反馈类型，您还可以添加：

button:active {
    -webkit-transform: translate(1px, 1px);
    box-shadow: none;
}

演示带/:active

这仅作为-webkit浏览器的前缀。您需要为所支持的任何内容提供正确的供应商前缀。