• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

CSS3创意样式按钮

网络技术 云落 3年前 (2014-10-12) 475次浏览 已收录 0个评论

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

CSS3 创意样式按钮

查看预览下载附件

基本 HTML 结构以及样式示例

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

<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

转载自:CSS3 创意样式按钮


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS3 创意样式按钮
喜欢 (11)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址