Question

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

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

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

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

Answer 2

看起来像http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba的无聊版本：）

你可以从那里采取例子，只是改变颜色，可能想要替换

border-bottom: 1px solid #222;

类似

border: 3px solid brown;

上面的示例使用alpha混合png作为渐变，但您也可以使用css3渐变，请参阅http://css-tricks.com/examples/CSS3Gradient/以获得良好的跨浏览器示例。

Answer 3

只需将图片另存为背景

<input type="submit"  class="btnSqueareInput" name="commit" value="SIGN IN"/>

btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}

其中square.png是按钮w / o 'SIGN IN'

的rge图像

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

3 个答案: