CSS3实现背景与按钮旋转错位代码

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

这个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

本文转自设计达人

文章出自：https://www.zuifengyun.com/css3-bei-jing-yu-an-niu-cuo-wei.html 版权所有，除注明外皆为原创。文章仅为作者个人观点，不代表醉风云立场。