如何调整按钮的CSS样式
我目前有看起来有点过时的按钮的CSS样式。这里是我的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的一部分,我应该改变来获得这种效果?
谢谢!
没错。这将做到这一点。
.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 */
}
您可以创建渐变的图像,但这需要时间,并且会使页面加载较慢。
如何:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
或本:
http://css3buttongenerator.com/
这两个站点都给出类似的按钮,第一个链接可能是更相关的,你只需要让他们有点高。
要创建黄色渐变,您可以使用背景图像,也可以使用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。较老的浏览器会忽略圆角和文字阴影。
试试这个:
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
的文本。让我知道你是否需要进一步的帮助!
没有工作。它使按钮看起来很破碎..很难描述如何。 – GeekedOut 2012-02-24 17:06:12
我差点拿到了,但由于某种原因,按钮不是黄色的,而是一些绿色的:http://www.comehike.com/hikes/park.php?park_id=5有什么想法,为什么? :) – GeekedOut 2012-02-24 17:39:44
你的意思是渐变的顶部?我故意这样做,因为在你给的照片中就是这样。如果你喜欢,我可以改变它。 – ACarter 2012-02-24 18:14:03