CSS图书馆 » HTML & CSS » 有趣的CSS按钮 让背景与按钮错位

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

发表于: HTML & CSS. 评论 (6)
Sponsor

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

color-button

 

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

color-button-website

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论6 Responses to “有趣的CSS按钮 让背景与按钮错位”

  1. 陈韵 - 回复

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

  2. Jason - 回复

    有種爆框的凸顯設計

  3. 小蜜蜂 - 回复

    不是很好看呀

    • ShunYea -

      测试嵌套回复

    • ShunYea -

      再次测试嵌套回复

  4. 83地仙 - 回复

    (´・ω・`)


{ 发表评论 }