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

Question

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

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

渐变从顶部:#E14C5B 到中间:#D33742 到底部:#B61C27，带有几个圆 Angular 径向像素。

在 CSS 中这甚至可能吗？

Answer 1

我会让你开始......

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;
}

DEMO

截图:

如果你想在点击时看到某种点击反馈类型，你还可以添加:

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

DEMO w/ :active

这仅用于 -webkit 浏览器的前缀。无论您支持什么，您都需要提供适当的供应商前缀。