纯CSS3打造精美按钮美洲杯赌球

2019-07-06 09:11 来源:未知

美洲杯赌球,利用CSS3实现精美按钮,效果如下图所示,也可以狠狠点击这里。前端开发whqet,关注前端开发技术 分享网页相关资源。

创建漂亮的 CSS 按钮的 10 个代码片段

美洲杯赌球 1

如果你正在寻找一些高质量的 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 按钮合集包是个不错的选择。

代码地址:【传送门

TAG标签:
版权声明:本文由美洲杯赌球发布于计算机教程,转载请注明出处:纯CSS3打造精美按钮美洲杯赌球