CSS3创意样式按钮

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

42628

发布于 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

    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. 这几个按钮真的是很好看很赞很精致啊!~

    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. 楼主分享的技巧都非常不错,主题设计也很漂亮,支持

    12
  10. 每次看这个都很惊艳

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

    请叫我欧先生! 2013-06-14
    10
  12. 设计非常好 非常有美感 我是来学习求教的 谢谢!!

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

    正仔 2013-06-14
    8
  14. demo不是很好看啊

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

    6
  16. 简洁,大方。赞一个!

    5
    1. Javin

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

      1号 Javin 2013-06-14
  17. 好玩!

    4
    1. Javin

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

      1号 Javin 2013-06-14
  18. 收了,刚好用得上 :mrgreen:

    3
    1. Javin

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

      1号 Javin 2013-06-14
      1. 只用到一个小小的按钮 :lol:

        1. 不错!!!

          afu 2013-06-14