分享一个免费的按钮 CSS 样式库——Buttons

  • A+
所属分类:WordPress
摘要

具体如何使用,这个就不用我多说了吧,我这样的CSS小白都可以用了,所以说真的是很简单的,多看看样例链接里的例子就可以使用了。

最近在折腾【玉满斋旗舰店】的时候意外的发现了一个不错的,免费的按钮 CSS 样式库——Buttons,第一时间用在了【玉满斋】的侧边栏上了(图1),没想到效果出奇的好。无论是在网站布局还是网页内需要使用“按钮”的时候,这个样式库都可以用到,特别是鸟哥的 Begin 主题兼容性相当的好。

目前【玉满斋】侧边栏上的效果,图1

其实还可以实现很多CSS按钮样式的,我截了几张图大家可以先看看:

更多按钮样式,大家可以直接访问样例链接里面的即可:

Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

看完样例链接后感觉如何,是不是很炫酷呀!这个CSS样式表都在一个buttons.css里面的,只需要下载上传到网站上引用这个CSS文件就可以在自己的博客里使用了,还是非常方便的!

  1. <!-- Buttons 库的核心文件 -->
  2. <link rel="stylesheet" href="css/buttons.css">
  3. <!-- 当需要使用带下拉菜单的按钮时才需要加载下面的 JavaScript 文件 -->
  4. <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  5. <script type="text/javascript" src="js/buttons.js"></script>
  6. <!-- 只有使用字体图标时才需要加载 Font-Awesome -->
  7. <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

大家可以根据自己的需要来选择上面的代码,像明月就引用了这个CSS文件,其他的好像鸟哥的 Begin 主题本身就有引用的,所以这里就不用重复引用了。

上面引用CSS库文件的代码可以通过鸟哥的主题 Begin 选项里的“广告位”选项卡的下面“需要在页头<head></head>之间加载的广告代码,如无必要不需添加任何东西”里填上就可以了。

具体如何使用,这个就不用我多说了吧,我这样的CSS小白都可以用了,所以说真的是很简单的,多看看样例链接里的例子就可以使用了。

历史文章推荐:

  • 我的微信
  • 扫一扫加好友
  • weinxin
  • 站长QQ群
  • 群号:284775512
  • weinxin
明月登楼

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:20   其中:访客  11   博主  9

    • 管家婆 管家婆 5

      还是js较方便

      • 七号文库 七号文库 1

        谢谢分享

        • Koolight Koolight 6

          不错啊,很漂亮的样式,很大气!

          • 闲鱼 闲鱼 5

            样式也蛮好看的,不过一般用不到这么多,完全可以自己css解决下

            • boke112导航 boke112导航 5

              这个不错,这样就不用自己写CSS代码了,挺好的

              • 言曌博客 言曌博客 0

                自己用的多的还是Bootstrap的

                • 橘子书 橘子书 5

                  我喜欢直接写css。感觉为了里面的几个按钮,加载太多css也不是什么好事。

                  • WordPress头条 WordPress头条 3

                    评论完点击输入QQ号,昵称变成“请输入您的QQ号 ”了 :???: