专栏首页小蔚记录BUTTONS V. 2.0.0——CSS按钮库

BUTTONS V. 2.0.0——CSS按钮库

 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Buttons库学习</title>
  6     <style type="text/css">  
  7         body {
  8             margin: 0;
  9             padding: 0;
 10             font-family: "microsoft yahei";
 11             
 12         }
 13         a {
 14             text-decoration: none;
 15             outline: none;
 16         }
 17         /*
 18         * Base Button Style
 19         *
 20         * The default values for the .button class
 21         */
 22         .button {
 23           color: #666;
 24           background-color: #EEE;
 25           border-color: #EEE;
 26           font-weight: 300;
 27           font-size: 16px;
 28           font-family: "microsoft yahei","Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 29           text-decoration: none;
 30           text-align: center;
 31           line-height: 40px;
 32           height: 40px;
 33           padding: 0 56px;
 34           margin: 10px;
 35           display: inline-block;
 36           appearance: none;
 37           cursor: pointer;
 38           border: none;
 39           -webkit-box-sizing: border-box;
 40              -moz-box-sizing: border-box;
 41                   box-sizing: border-box;
 42           -webkit-transition-property: all;
 43                   transition-property: all;
 44           -webkit-transition-duration: .3s;
 45                   transition-duration: .3s; }
 46 
 47         .button-large {
 48           font-size: 20px;
 49           height: 45px;
 50           line-height: 45px;
 51           padding: 0 45px; }
 52         
 53         /*
 54         * Button Shapes
 55         *
 56         * This file creates the various button shapes
 57         * (ex. Circle, Rounded, Pill)
 58         */
 59         .button-rounded {
 60               border-radius: 4px; }
 61         /*
 62         * Raised Buttons
 63         *
 64         * A classic looking button that offers
 65         * great depth and affordance.
 66         */
 67         .button-raised {
 68           border-color: #e1e1e1;
 69           border-style: solid;
 70           border-width: 1px;
 71           line-height: 38px;
 72           background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
 73           background: linear-gradient(#f6f6f6, #e1e1e1);
 74           -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
 75                   box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); }
 76         .button-raised:hover, .button-raised:focus {
 77             background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
 78             background: linear-gradient(top, white, gainsboro); }
 79         .button-raised:active, .button-raised.active, .button-raised.is-active {
 80             background: #eeeeee;
 81             -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
 82             box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; }
 83 
 84        /*
 85         * Base Colors
 86         *
 87         * Create colors for buttons
 88         * (.button-primary, .button-secondary, etc.)
 89         */         
 90         .button-primary:hover, .button-primary:focus{
 91             background-color: #4cb0f9;
 92             border-color: #4cb0f9;
 93             color: #FFF; }
 94 
 95         /*
 96         * Raised Button Colors
 97         *
 98         * Create colors for raised buttons
 99         */
100         .button-raised.button-primary {
101           border-color: #088ef0;
102           background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0));
103           background: linear-gradient(#34a5f8, #088ef0); }
104         .button-raised.button-primary:hover, .button-raised.button-primary:focus {
105             background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6));
106             background: linear-gradient(top, #42abf8, #0888e6); }
107 
108         .button-highlight {
109           background-color: #FEAE1B;
110           border-color: #FEAE1B;
111           color: #FFF; }
112         .button-highlight:hover, .button-highlight:focus {
113             background-color: #fec04e;
114             border-color: #fec04e;
115             color: #FFF; }
116 
117     </style>
118 </head>
119 <body>
120     <a href="#none" class="button button-raised button-primary">GO</a>
121     <a href="#none" class="button button-large button-highlight button-rounded">Default-CSS</a>
122 </body>
123 </html>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html --- rem 媒体查询

    手机屏幕的分辨率越来越高,比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图,其参考分辨率为1440*...

    小蔚
  • CSS Hack解决浏览器IE部分属性兼容性问题

    不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览...

    小蔚
  • 左右侧边栏固定宽,中间宽度自适应

    小蔚
  • js验证码倒计时

    IT故事会
  • 文字搬运工

    IT人一直在路上
  • AMQP-RabbitMQ/3/发布订阅模式

    RabbitMQ中消息传递模型的核心思想是生产者永远不会将任何消息直接发送到队列。实际上,生产者通常甚至不知道消息是否会被传递到任何队列。 相反,生产者只能向E...

    喜欢天文的pony站长
  • 【干货】Jenkins 集成 Sonar 实现量化代码质量管理服务

    通常,单一的 Jenkins 对于项目的持续集成够用了。本文总结另外一种流行方案,Jenkins 与 Sonar 集成:Sonar 是 Jenkins 之外独立...

    IT技术小咖
  • 在小尺寸人脸检测上发力的S3FD

    人脸检测领域目前主要的难点集中在小尺寸,模糊人脸,以及遮挡人脸的检测,这篇ICCV2017的S3FD(全称:Single Shot Scale-invarian...

    BBuf
  • 腾讯WeTest移动测试沙龙邀请【第二期】——Unity性能及测试开发沙龙,与你相约ChinaJoy!

    7月28日ChinaJoy期间,腾讯WeTest将联合Unity官方一起举办Unity性能及测试开发沙龙,分享手游上线前的适配兼容测试、单元测试、性能分析优化...

    WeTest质量开放平台团队
  • 外部排序

    当我们要排序的文件太大以至于内存无法一次性装下的时候,这时候我们可以使用外部排序,将数据在外部存储器和内存之间来回交换,以达到排序的目的

    用户1260737

扫码关注云+社区

领取腾讯云代金券