收藏本站 织梦模板之家(Mubanzhijia.Com),专注织梦模板设计制作!

热门搜索:

当前位置:主页 > 网站教程 > 素材资源 >

CSS3创意按钮样式

时间:2016-01-01 来源:互联网 作者:网络 阅读:

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

CSS3创意按钮样式

基本HTML结构以及样式示例

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

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

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

下面就是其中的一个例子(Button 6d)的特定样式:

  1. /* Button 6d */ 
  2. .btn-6d {  
  3.     border2px dashed #226fbe;  
  4. }  
  5.  
  6. .btn-6d:hover {  
  7.     backgroundtransparent;  
  8.     color#226fbe;  
  9. }  

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

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

查看预览:

查看预览

附件下载:

附件下载

本文版权归原作者所有,转载请注明原文来源出处,织梦模板之家感谢您的支持!

本文链接:http://www.mubanzhijia.com/sucaiziyuan/296.htmlCSS3创意按钮样式http://www.mubanzhijia.com/sucaiziyuan/296.html

相关内容:
发表评论:
特价模板
特价织梦模板本站将持续推出,特价模板不参与其他促销活动!