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

正在很努力的加载中...

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

color-button

这个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设计和按钮,大家可以进去看看,很不错的哦。

color-button-website

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

本文转自设计达人

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

正在很努力的加载中...

关于本文作者:HuiSir

建站爱好者,互联网评论家,网页视觉设计师