CSS3创意样式按钮

分类栏目：用户体验 - 前端开发

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

42084

发布于 26 条评论

今天为大家分享一些用css3写出来的创意样式按钮。这套按钮样式在鼠标经过时、点击时都有一些微妙的变换，包含一些简单css3过渡效果、动画效果以及javascript的辅助控制效果。在这套创意样式按钮当中，很多地方都是巧妙的使用了 :before和 :after等伪元素。

creative-button-styles

查看预览下载附件

基本HTML结构以及样式示例

下面就来看看具体的效果和实现方法的一个示例。创建一个按钮是非常简单的，只需要一个<button></button>标签。

<button class="btn btn-6 btn-6d">Button</button>

从上面代码可以看出，加了几个样式（btn btn-6 btn-6d），其中的 “btn” 为公共样式，其他两个则为特定按钮的特定样式。在这里就是使用了一个css编写小技巧，在我们编写css样式时，可以把公共部分提取出来，然后在需要的地方调用。这样子写出来的css代码将会更加容易维护和简短，同时也确保页面中的样式统一。

下面就是其中的一个例子（Button 6d）的特定样式：

/* Button 6d */
.btn-6d {
    border: 2px dashed #226fbe;
}

.btn-6d:hover {
    background: transparent;
    color: #226fbe;
}

这部分样式就决定了特定按钮之间的差异性。

查看预览下载附件

好了，具体的每个按钮的创意样式，可以看看演示页面，希望可以给你带来帮助和灵感的启发。

译文：codrops

相关推荐

全部评论 / 26

  1. miller

    可以使用在线按钮样式生成器:http://buttoncssgenerator.com 在线生成按钮css，支持各大主流浏览器，款式随心定制，也有丰富的示例可以选择

    miller 2013-06-14
    20
  2. Hank

    mark 效果很好

    Hank 2013-06-14
    19

  3. 很好，学习了! http://www.xinfanwan.com

    风水网 2013-06-14
    18

  4. 本人前端博客，多多支持：www.haorooms.com

    Aaron 2013-06-14
    17

    1. 前端博客，刚刚没有加 http://www.haorooms.com/

      css常用总结：http://www.haorooms.com/post/css_common

      Aaron 2013-06-14

  5. 这几个按钮真的是很好看很赞很精致啊！~

    netyang 2013-06-14
    16

  6. 大牛，可以问个问题不？您的这个“查看预览”使用的是插件呢（插件名是啥呢？）还是自己做好上传到空间的？ :roll:

    沐凡 2013-06-14
    15
    1. Javin

      自己做好上传空间的

      1号 Javin 2013-06-14

  7. 效果很好，就是ie8已下都不兼容

    phplog 2013-06-14
    14

  8. 学习！！！

    小麦 2013-06-14
    13

  9. 楼主分享的技巧都非常不错，主题设计也很漂亮，支持

    应用喇叭 2013-06-14
    12

  10. 每次看这个都很惊艳

    大宇宙 2013-06-14
    11

  11. 唯一缺点就是大多属性IE不支持。

    请叫我欧先生！ 2013-06-14
    10

  12. 设计非常好 非常有美感 我是来学习求教的 谢谢！！

    冰点阳光 2013-06-14
    9

  13. 好酷啊O(∩_∩)O~~

    正仔 2013-06-14
    8

  14. demo不是很好看啊

    麦田一根葱 2013-06-14
    7

  15. 百度卢松松贴吧 http://tieba.baidu.com/f?kw=%C2%AC%CB%C9%CB%C9 希望大家支持!

    沫小熙iBlog 2013-06-14
    6

  16. 简洁，大方。赞一个！

    hudidit.com 2013-06-14
    5
    1. Javin

      你的网站胡作菲为挺有趣的。

      1号 Javin 2013-06-14

  17. 好玩！

    xinsenz 2013-06-14
    4
    1. Javin

      css3制作出来的效果是挺好玩的。总能变化出另人惊奇的效果来。

      1号 Javin 2013-06-14

  18. 收了，刚好用得上 :mrgreen:

    米贴创意设计 2013-06-14
    3
    1. Javin

      有效率，这么快就应用到404页面。

      1号 Javin 2013-06-14

      1. 只用到一个小小的按钮 :lol:

        米贴创意设计 2013-06-14

        1. 不错！！！

          afu 2013-06-14