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

Sponsor

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

查看CSS按钮: 在线DEMO

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

HTML代码

<button class="yellow">
查看更多
</button>

 
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

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。