纯CSS3打造精美按钮美洲杯赌球
美洲杯赌球，利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击这里。前端开发whqet，关注前端开发技术 分享网页相关资源。
创建漂亮的 CSS 按钮的 10 个代码片段
如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。
实现两种风格的按钮，主要利用box-shadow阴影实现3d风格的按钮，同时利用css的counter实现计数。
网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。
html结构非常简单，详细代码如下。
<div class="buttonContainer"> <a href="#" class="btn">Number One</a> <a href="#" class="btn">Number Two</a> <a href="#" class="btn">Number Three</a> <a href="#" class="btnn">Number Four</a> <a href="#" class="btnn">Number Five</a> <a href="#" class="btnn">Number Six</a> </div>
1. Plastic Buttons
这组按钮相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中、大号按钮供你任意挑选。所以，你可以轻松地重新调整或更换它们。而利用纯 CSS 的实现方式，或许它也是网上最简洁、干净的按钮样式之一。
代码地址：【传送门】
利用伪对象::before实现计数容器，利用阴影实现模拟3d效果，:hover和:active激活3d效果。
1. Cool Buttons
这是一组由 Felipe Marcos 制作的酷炫按钮。与上面的塑料按钮略有不同，但它们也易于使用。虽然没有闪亮的塑料设计，但当你点击后，依然会感受到有种“推”的效果。
你可以从 6 款默认设计的颜色中随意挑选，或者你也可以定制自己喜欢的颜色、尺寸与样式。由于根据 CSS 类名进行分类，所以你可以在一个类上设置默认的按钮样式以及颜色。
代码地址：【传送门】
效果一的实现
1. Google Buttons
Google 的在线工具（如 Blogger，云盘，Gmail 及其搜索功能）都有不同的按钮样式，而开发者 Tim Wagner 在此 Pen中克隆了这些风格。
作者受 Google 设计的启发，利用纯 CSS3 实现了这些看上去很酷的按钮。这还有个与此相似的示例，它是由 Monkey Raptor 制作的扩展按钮，他为这些按钮进行了一些其他的混合。
代码地址：【传送门】
.btn{ display: block; position: relative; width: 160px; height: 30px; line-height: 30px; text-align: center; background: linear-gradient(bottom, #0E8AB7, #16B1E9); margin: 60px; border-radius:3px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999; user-select:none; } .btn:before{ content: counter(abc); width: 40px; height: 30px; line-height: 30px; position: absolute; left: -30px; top: 0; background: linear-gradient(bottom, #0A6181, #0D85B1); border-right:solid 1px #07526e; border-radius: 5px 0 0 5px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999; transition: left 1s ease; } .btn:hover:before{ left: -40px; } .btn:active{ top: 3px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 4px 2px #999; } .btn:active:before{ top:-3px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999,4px 0 8px rgba(0,0,0,.3); }
1. Bunch-o-Buttons
这是由 Alan Collins 在 CodePen 上制作的基于塑料风格的按钮合集。它拥有多种颜色以及不同的款式。这个按钮集合设计的独特之处在于，它仅通过一个单独的 CSS 类就可以在光滑的样式与扁平化样式间任意切换。是不是很便捷呢？
代码地址：【传送门】
效果二的实现
1. Social Buttons
这是由具备独特的配色方案和品牌图标组成的社交按钮合集。开发者 Stan Williams 在GitHub上也发布了这个合集，并且进行着按钮颜色与款式的更新与维护。目前它由 50 个不同的按钮组成，同时这些按钮都有一个背景上的闪亮渐变，但它们的质量都是不错的。
如果你需要在你的网站上添加一些社交分享按钮，那么这个纯 CSS 按钮合集包是个不错的选择。
代码地址：【传送门】
