如何在HTML/CSS中实现此按钮？

Question

这是一个最初在Silverlight中实现和设置样式的按钮.

如何在HTML/CSS中实现此按钮？请注意边框和按钮背景中的不同渐变以及边框中的圆角.边框宽度应可调节,但按钮周围尺寸均匀.

示例图片中的红色是页面背景,不是按钮的一部分.

按钮截图​​http://i52.tinypic.com/2vsetlw.png

更新:忘了提,我更喜欢没有图像的解决方案,即.纯CSS.Css3很好,我不需要支持IE6-8.

Answer 1

我知道有时勺子喂食不是最有用的东西,但我需要休息一下.

演示:http://jsfiddle.net/wesley_murch/SzHQZ/

在FF4和Chrome中看起来不错,IE看起来很不错(虽然你可以用PIE解决它).

这是我使用的CSS,我从一些随机的在线生成器获得了渐变代码,因此它可能不是最佳的.与您的图像相比,对比度太高,所以只需对其进行微调即可.

<button>
    <span>
        Sign in
    </span>
</button>

button {
    border:0;
    padding:3px;
    background:#735544;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.18, #271D1B),
        color-stop(0.59, #735544)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #271D1B 18%,
        #735544 59%
        );
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;   
}

---需要这个突破才能获得降价才能表现出来......

button span {
    display:block;
    color:#fff;
    font:900 18px arial;
    text-transform:uppercase;
    padding:.35em 1.3em;
    background:#382B25;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.18, #382B25),
        color-stop(0.59, #C2A489)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #382B25 18%,
        #C2A489 59%
        );   
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;   
}