html按钮背景消失,有趣的CSS按钮 让背景与按钮错位

有趣的CSS按钮 让背景与按钮错位

12月 14, 2013

评论 (6)

Sponsor

在网站设计中不一定要很复杂的技术才能做出好东西，有时候一些创新的设计只需要简单的代码就能写出来，比如今天展示给大家看的一个CSS按钮制作，加入一些微创新，然而这按钮就变得很有趣。

查看CSS按钮: 在线DEMO

这个CSS按钮的实现也非常简单，只需一个HTML元素即可，下面一起来看看制作方法：

HTML代码

查看更多

CSS样式代码

背景使用伪类(伪元素):after实现，先定位left:-14px偏离一点按钮，然后使用css3的旋转属性rotate将背景旋转1deg，再配上可爱的颜色就完成啦！

button {

position:relative;

margin:10px;

display:inline-block;

padding:8px 25px 8px 25px;

border:1px solid black;

background:none;

text-transform:uppercase;

font-family:sans-serif;

font-size:11px;

font-weight:800;

letter-spacing:1px;

cursor:pointer;

}

button:after {

position: absolute;

top:2px;

left:-4px;

content:"";

height:100%;

width:100%;

z-index:-999;

-webkit-transform: rotate(-1deg);

-moz-transform: rotate(-1deg);

}

.yellow:after { background:#f4ec5a; }

下面这个网站就是使用这个创意来实现网站的logo设计和按钮，大家可以进去看看，很不错的哦。

网站地址：http://freshboss.com

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

陈韵 -

2014 年 01 月 23 日 下午 9:50

感觉还不错，自己用得好就好

Jason -

2013 年 12 月 16 日 下午 12:02

有種爆框的凸顯設計

小蜜蜂 -

2013 年 12 月 14 日 下午 10:13

不是很好看呀

ShunYea -

2014 年 01 月 13 日 上午 12:26

测试嵌套回复

ShunYea -

2014 年 01 月 13 日 上午 12:26

再次测试嵌套回复

83地仙 -

2013 年 12 月 14 日 上午 10:50

(´･ω･`)

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站