如何调整按钮的CSS样式

Question

我目前有看起来有点过时的按钮的CSS样式。这里是我的CSS：

a.yellow_button { 
font-weight: bold; 
font-size: 1.2em; 
-moz-border-radius: 14px 14px 14px 14px; 
-webkit-border-radius: 14px; 
border-radius: 14px; 

background: #ffce2e; 
color: #444; 
text-shadow: 1px 1px 1px rgba(256, 256, 256, 0.9); 

-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 

border: 1px solid #444; 
cursor: pointer; 
text-decoration: none; 
padding: 5px 6px; 
margin-top: 0; 
margin-left:0; 
margin-right: 2px; 

float:none; 
display: inline-block; 

} 

a.yellow_button:hover { 
background: none repeat scroll 0 0 #ff0; 
color: #000; 
} 

你可以看到这些按钮，因为他们目前会出现comehike.com使网站的设计那种老看的。

我需要做的是使按钮看起来像这个样机的右上角的黄色按钮：

任何想法，其中的CSS的一部分，我应该改变来获得这种效果？

谢谢！

Answer 1

没错。这将做到这一点。

.whatever-the-class-is { 
    /* No border */ 
    border-style:none; 

现在对于一些阴影

-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 

和曲面边界

-moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 

最后，梯度。此代码旨在用于许多浏览器。

background: #bfc126; /* Old browsers */ 
    background: -moz-linear-gradient(top, #bfc126 0%, #ffff00 100%); /* Firefox */ 
    background: -webkit-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Chrome, Safari */ 
background: -o-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Opera */ 
background: -ms-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* IE */ 
background: linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Probably should include this aswell */ 
} 

您可以创建渐变的图像，但这需要时间，并且会使页面加载较慢。

Answer 2

如何：

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

或本：

http://css3buttongenerator.com/

这两个站点都给出类似的按钮，第一个链接可能是更相关的，你只需要让他们有点高。

Answer 3

要创建黄色渐变，您可以使用背景图像，也可以使用CSS渐变，如this example。当然，你将不得不改变颜色，但这样的事情：

background: #999; /* for non-css3 browsers */ 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 

为了让你使用CSS border-radius财产，reference圆角。这将是这样的：

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 

为了获得白色1px的文字阴影，你可以使用CSS text-shadow财产，reference。喜欢的东西：

text-shadow: 1px 1px 1px #fff; 

注意会有这个解决方案被限制浏览器的支持，因为它是CSS3。较老的浏览器会忽略圆角和文字阴影。

Answer 4

试试这个：

a.yellow_button { 
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    text-shadow: 1px 1px 1px #fff; 
    background: #dac303; /* Old browsers */ 
    background: -moz-linear-gradient(top, #dac303 0%, #f1e000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dac303), color-stop(100%,#f1e000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #dac303 0%,#f1e000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #dac303 0%,#f1e000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #dac303 0%,#f1e000 100%); /* IE10+ */ 
    background: linear-gradient(top, #dac303 0%,#f1e000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dac303', endColorstr='#f1e000',GradientType=0); /* IE6-9 */ 
} 

这应该让你开始按钮和text-shadow的文本。让我知道你是否需要进一步的帮助！