今天，我们将制作一些很棒CSS3按钮！ 它们基于流行的PSD免费赠品 Orman Clark为他的网站Premium Pixels制作的。 我们将尝试精确复制CSS副本，并尽可能减少HTML标记。
编者注： Orman允许我们对我们选择的任何Premium Pixel免费赠品进行CSS修饰。 这些粗大的按钮只是可用的许多免费赠品之一，因此将来会希望有更多类似的教程。 晕！
步骤1：概述HTML文档
我们将从创建一个新HTML文档开始。 我基于HTML5样板 ，只是为了能够快速启动并具有完美的文档标记。 我也使用了它附带CSS规范化文档。 然后，我们将添加一个包含一些基本锚点的列表。 如此简单，我们不需要任何额外的跨度或div，我们的好朋友CSS3会解决这个问题。
为了给它一些CSS样式，我们为列表提供了一个“按钮”类。 并且由于我们将展示Orman设计中使用的所有颜色，因此我们将为每个链接提供不同的颜色作为类。
<ul class="buttons">
<li><a href="#" class="button gray">Download</a></li>
<li><a href="#" class="button pink">Download</a></li>
<li><a href="#" class="button blue">Download</a></li>
<li><a href="#" class="button green">Download</a></li>
<li><a href="#" class="button turquoise">Download</a></li>
<li><a href="#" class="button black">Download</a></li>
<li><a href="#" class="button darkgray">Download</a></li>
<li><a href="#" class="button yellow">Download</a></li>
<li><a href="#" class="button purple">Download</a></li>
<li><a href="#" class="button darkblue">Download</a></li>
</ul> 这就是我们现在所需要的，我们HTML文档已完成！
到目前为止，这是您在浏览器中查看时的外观：
步骤2：一些基本CSS样式
在开始使用渐变，圆角等样式之前，我们将首先应用一些基本样式。
这里没有什么特别的，只是普通CSS2东西。
ul { list-style: none; }
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
}由于我们添加了类，因此我们也可以轻松更改按钮的颜色。 因此，我们将对其他所有颜色（例如灰色）执行此操作。 您可以检查演示文件中的所有颜色代码。
/* GRAY */
.gray,
.gray:hover {
color: #555;
border-bottom: 4px solid #b2b1b1;
background: #eee;
}
.gray:hover { background: #e2e2e2; }如果一切都做得不错，则应该有这样的东西。 如果我们住在2008年，那就太好了！
第3步：一路跨界！
现在，如果您仔细看一下Photoshop文件，您会发现底部不仅有较粗的边框，而且整个边框也较细，并且在较粗的部分之间有一些多余的线和实际的边界。 为了将最后一个细节转换为css，我们将使用CSS2技巧:before和:after伪元素。
我们将这些元素（可以在单独的方框中看到）放置在具有position属性的实际按钮的正后方。 为了保存一些css线，我们将首先对两个元素进行样式设置，然后仅添加前元素的值。
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
}
a.button:before,
a.button:after {
content: '';
position: absolute;
left: -1px;
height: 25px;
width: 80px;
bottom: -1px;
}
a.button:before {
height: 23px;
bottom: -4px;
border-top: 0;
}当我们添加正确的颜色时，一切开始看起来不错！
/* GRAY */
.gray,
.gray:hover {
color: #555;
border-bottom: 4px solid #b2b1b1;
background: #eee;
}
.gray:before,
.gray:after {
border: 1px solid #cbcbcb;
border-bottom: 1px solid #a5a5a5;
}
.gray:hover { background: #e2e2e2; }步骤4：添加CSS3 Magic
现在大家都在等待CSS3部分。 我们将从为所有按钮添加圆角开始：
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
} 然后当然，我们的:before和:after元素也需要圆角，以使边框合适。 但是， :before元素不需要将圆角修圆，否则我们将看到一个小错误。 由于:before元素是位置最低的元素，因此我们将框阴影添加到此元素，而不是添加到主要元素。
a.button:before,
a.button:after {
content: '';
position: absolute;
left: -1px;
height: 25px;
width: 80px;
bottom: -1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
a.button:before {
height: 23px;
bottom: -4px;
border-top: 0;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
-moz-box-shadow: 0 1px 1px 0px #bfbfbf;
box-shadow: 0 1px 1px 0px #bfbfbf;
}最后，我们将为每种单独的颜色应用一些渐变背景，一个内部阴影和一些文本阴影。 我们还将添加：visited状态，以防止IE6中的错误。
/* GRAY */
a.gray,
a.gray:hover,
a.gray:visited {
color: #555;
border-bottom: 4px solid #b2b1b1;
text-shadow: 0px 1px 0px #fafafa;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2));
background: -moz-linear-gradient(top, #eee, #e2e2e2);
box-shadow: inset 1px 1px 0 #f5f5f5;
}
.gray:before,
.gray:after {
border: 1px solid #cbcbcb;
border-bottom: 1px solid #a5a5a5;
}
.gray:hover {
background: #e2e2e2;
background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee));
background: -moz-linear-gradient(top, #e2e2e2, #eee);
}这应该是我们的结果。 看起来不错，是吗？
步骤5：我们没有忘记什么吗？
我们仍然需要做一件事。 Orman也为活动状态进行了设计。 因此，我们当然会将其添加到我们CSS版本中！
我们将处于活动状态的代码置于所有颜色定义下，因为其中一些值需要覆盖。 与其他州的第一个区别是它没有国界。 它也位于较低位置以暗示缩进。 而且，我们需要使用2个阴影而不是一个阴影：普通的白色阴影和第二个透明的内部阴影。 最后，我们不再需要:before和:after伪元素。
/* ACTIVE STATE */
a.button:active {
border: none;
bottom: -4px;
margin-bottom: 22px;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
a.button:active:before,
a.button:active:after {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}这是我们的按钮在活动状态下的样子：
步骤6 ：（可选）旧版浏览器
现在，我们有了一些不错CSS3按钮，它们可以在所有现代浏览器中使用。 但是，例如Internet Explorer呢？ IE8和更低版本不支持框或文本阴影，也不支持渐变。
为了能够专门为这些浏览器设置元素样式，我们可以使用Modernizr ，这是一个JavaScript库，用于检测您的浏览器是否可以处理CSS3和HTML5属性。 它不能修复旧的浏览器的问题，它添加类的html标记（报告为准能力和不可用），以允许另类的造型。
另一个选择是使这些浏览器与其他一些JavaScript库一起运行（称为polyfills ），但这不是本教程要介绍的内容。 相反，我们只是将图像用于较旧的浏览器。
首先，我们将制作我们的自定义构建版本的Modernizr，那样我们就不必随身携带所有多余的javascript。 我们可以在他们的网站上轻松做到这一点。 当我们在html文件中实现javascript时，我们只需要为特定的html类定义替代样式即可。 我们将为不支持我们使用的2种最著名CSS3效果（边界半径和CSS渐变）之一的浏览器使用图像。 而且，由于某些较旧的浏览器甚至不支持生成的内容（：before和：after），因此我们也将提及其中之一。
/* MODERNIZR FALLBACK */
.no-cssgradients a.button, .no-cssgradients a.button:visited,
.no-borderradius a.button, .no-borderradius a.button:visited,
.no-generatedcontent a.button, .no-generatedcontent a.button:visited {
background: url(images/sprite.png) no-repeat 0 0px;
height: 32px;
width: 82px;
}
.no-cssgradients a.button:hover,
.no-borderradius a.button:hover,
.no-generatedcontent a.button:hover {
background: url(images/sprite.png) no-repeat 0 -32px;
}
.no-cssgradients a.button:active,
.no-borderradius a.button:active,
.no-generatedcontent a.button:active {
background: url(images/sprite.png) no-repeat 0 -64px;
bottom: 0;
line-height: 35px;
}
.no-cssgradients a.gray,
.no-cssgradients a.gray:visited,
.no-cssgradients a.gray:hover { background-position-x: 0; }
.no-cssgradients a.pink,
.no-cssgradients a.pink:visited,
.no-cssgradients a.pink:hover { background-position-x: -82px; }
.no-cssgradients a.blue,
.no-cssgradients a.blue:visited,
.no-cssgradients a.blue:hover { background-position-x: -164px; }
.no-cssgradients a.green,,
.no-cssgradients a.green:visited,
.no-cssgradients a.green:hover { background-position-x: -246px; }
.no-cssgradients a.turquoise,
.no-cssgradients a.turquoise:visited,
.no-cssgradients a.turquoise:hover { background-position-x: -328px; }
.no-cssgradients a.black,
.no-cssgradients a.black:visited,
.no-cssgradients a.black:hover { background-position-x: -410px; }
.no-cssgradients a.darkgray,
.no-cssgradients a.darkgray:visited,
.no-cssgradients a.darkgray:hover { background-position-x: -492px; }
.no-cssgradients a.yellow,
.no-cssgradients a.yellow:visited,
.no-cssgradients a.yellow:hover { background-position-x: -574px; }
.no-cssgradients a.purple,
.no-cssgradients a.purple:visited,
.no-cssgradients a.purple:hover { background-position-x: -656px; }
.no-cssgradients a.darkblue,
.no-cssgradients a.darkblue:visited,
.no-cssgradients a.darkblue:hover { background-position-x: -738px; }
.no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after,
.no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after,
.no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after {
border: 0;
}为了提高性能，我们将CSS Sprite用于悬停和活动状态。 而且：: visited状态仍然包含在内，以防止IE6错误。
结论
因此，现在我们有了完全跨浏览器CSS3按钮！ 您可能会认为这看起来像是10个按钮的大量代码，但这当然仅是CSS3可以做或不能做的演示。 您可以随心所欲地做任何事情！
到目前为止，我的第一个教程。.希望您喜欢它，谢谢阅读！
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
