BUTTONS-V2-CSS库样式职责

CSS库样式职责分离优点

　　模块样式命名更清晰化

　　易于维护、扩展性强

　　动画效果——修改样式后有过度效果，默认样式

源码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Buttons库学习</title>

     <style type="text/css">

         body {

             margin: 0;

             padding: 0;

             font-family: "microsoft yahei";

         }

         a {

             text-decoration: none;

             outline: none;

         }

         /*

         * Base Button Style

         *

         * The default values for the .button class

         */

         .button {

           color: #666;

           background-color: #EEE;

           border-color: #EEE;

           font-weight: 300;

           font-size: 16px;

           font-family: "microsoft yahei","Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

           text-decoration: none;

           text-align: center;

           line-height: 40px;

           height: 40px;

           padding: 0 56px;

           margin: 10px;

           display: inline-block;

           appearance: none;

           cursor: pointer;

           border: none;

           -webkit-box-sizing: border-box;

              -moz-box-sizing: border-box;

                   box-sizing: border-box;

           -webkit-transition-property: all;

                   transition-property: all;

           -webkit-transition-duration: .3s;

                   transition-duration: .3s; }

         .button-large {

           font-size: 20px;

           height: 45px;

           line-height: 45px;

           padding: 0 45px; }

         /*

         * Button Shapes

         *

         * This file creates the various button shapes

         * (ex. Circle, Rounded, Pill)

         */

         .button-rounded {

               border-radius: 4px; }

         /*

         * Raised Buttons

         *

         * A classic looking button that offers

         * great depth and affordance.

         */

         .button-raised {

           border-color: #e1e1e1;

           border-style: solid;

           border-width: 1px;

           line-height: 38px;

           background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));

           background: linear-gradient(#f6f6f6, #e1e1e1);

           -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);

                   box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); }

         .button-raised:hover, .button-raised:focus {

             background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));

             background: linear-gradient(top, white, gainsboro); }

         .button-raised:active, .button-raised.active, .button-raised.is-active {

             background: #eeeeee;

             -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;

             box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; }

        /*

         * Base Colors

         *

         * Create colors for buttons

         * (.button-primary, .button-secondary, etc.)

         */

         .button-primary:hover, .button-primary:focus{

             background-color: #4cb0f9;

             border-color: #4cb0f9;

             color: #FFF; }

         /*

         * Raised Button Colors

         *

         * Create colors for raised buttons

         */

         .button-raised.button-primary {

           border-color: #088ef0;

           background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0));

           background: linear-gradient(#34a5f8, #088ef0); }

         .button-raised.button-primary:hover, .button-raised.button-primary:focus {

             background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6));

             background: linear-gradient(top, #42abf8, #0888e6); }

         .button-highlight {

           background-color: #FEAE1B;

           border-color: #FEAE1B;

           color: #FFF; }

         .button-highlight:hover, .button-highlight:focus {

             background-color: #fec04e;

             border-color: #fec04e;

             color: #FFF; }

     </style>

 </head>

 <body>

     <a href="#none" class="button button-raised button-primary">GO</a>

     <a href="#none" class="button button-large button-highlight button-rounded">Default-CSS</a>

 </body>

 </html>

参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

BUTTONS V. 2.0.0——CSS按钮库的更多相关文章

  1. Django2.0引入css、js、img文件

    Django2.0引入css.js.img文件 一.文件结构 二.settings.py的配置 # Static files (CSS, JavaScript, Images) # https://d ...

  2. linux下依赖库的版本问题引起的安装失败：libssl-dev版本问题无法安装 ：libssl-dev : 依赖: libssl1.0.0 (= 1.0.1-4ubuntu3) 但是 1.0.1-4ubuntu5.31 正要被安装

    依赖库版本问题引起的安装失败解决方法如下有两种: 1.是由于源需要更新,如下操作: libssl-dev : 依赖: libssl0.9.8 (= 0.9.8o-1ubuntu4) 但是 0.9.8o ...

  3. 一个有意思的CSS样式库--BUTTONS

    我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...

  4. BayaiM__ORACLE之ASM概念 --V 1.0.0

    BayaiM__ORACLE之ASM概念                                --V 1.0.0 -------------------------------------- ...

  5. 从0搭建vue3组件库:Shake抖动组件

    先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...

  6. 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

    相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...

  7. vs2010下编译osip2和eXosip2的4.0.0版的静态库及搭建开发环境

    转载于:http://blog.csdn.net/lbc2100/article/details/48293911 本文为参考网上的动态库的方式,进行静态库的实现,在此对动态库的作者表示感谢. 第一步 ...

  8. VC++6.0 下配置 pthread库2010年12月12日 星期日 13:14VC下的pthread多线程编程 转载

    VC++6.0 下配置 pthread库2010年12月12日 星期日 13:14VC下的pthread多线程编程     转载 #include <stdio.h>#include &l ...

  9. 仅仅需手动添加一行代码就可以让Laravel4执行在SAE (v. 1.0.0)

    Github:https://github.com/chariothy/laravel4-sae (已更新至v1.1.0) laravel4-sae (v. 1.0.0) 仅仅需手动添加一行代码就可以 ...

随机推荐

  1. WCF学习之旅——第一个WCF示例（二）

    第四步:通过自我寄宿的方式寄宿服务 WCF服务需要依存一个运行着的进程(宿主),服务寄宿就是为服务指定一个宿主的过程.WCF是一个基于消息的通信框架,采用基于终结点(Endpoint)的通信手段. 终 ...

  2. KnockoutJS 3.X API 第七章 其他技术(6) 使用“fn”添加自定义函数

    有时,您可能会通过向Knockout的核心值类型添加新功能来寻找机会来简化您的代码. 您可以在以下任何类型中定义自定义函数: 因为继承,如果你附加一个函数到ko.subscribable,它将可用于所 ...

  3. 【转】Linux C动态内存泄漏追踪方法

    原文:http://www.cnblogs.com/san-fu-su/p/5737984.html C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借 ...

  4. php的mysql\mysqli\PDO(三)PDO

    原文链接:http://www.orlion.ga/1153/ PDO是一种数据库抽象层,不止可以访问mysql还可以访问其他数据库. 一.__construct() PDO::__construct ...

  5. 前端学PHP之函数

    × 目录 [1]函数定义 [2]函数参数[3]返回值[4]变量函数[5]回调函数[6]递归函数[7]加载函数[8]匿名函数 前面的话 PHP 的真正力量来自它的函数:它拥有超过 1000 个内建的函数 ...

  6. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  7. ASP.NET MVC下的四种验证编程方式

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...

  8. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  9. iOS开发之SQLite-C语言接口规范(二) —— Prepared Your SQL Statements

    在<SQLite的C语言接口规范(一)>中介绍了如何去连接打开数据库,本篇博客就介绍如何操作数据库,本篇主要给出了如何执行数据库查询语句(Select), 然后遍历结果集.本篇博客就直接使 ...

  10. IDDD 实现领域驱动设计－一个简单业务用例的回顾和理解

    上一篇:<IDDD 实现领域驱动设计-由贫血导致的失忆症> 这篇博文是对<实现领域驱动设计>第一章后半部分内容的理解. Domain Experts-领域专家 这节点内容是昨天 ...