/1.3/source/raw/demo/button/demo2.html
HTML | 70 lines | 66 code | 4 blank | 0 comment | 0 complexity | df98e59c2f199d70b56b7dda0441bc77 MD5 | raw file
Possible License(s): Apache-2.0
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Demo - 定制button的样式</title>
- <link href="http://g.tbcdn.cn/kissy/k/1.3.2/css/dpl/base.css" rel="stylesheet"/>
- <link href="assets/common.css" rel="stylesheet"/>
- <link href="assets/custombutton.css" rel="stylesheet"/><script src="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js" data-config="{combine:true}"></script>
- </head>
- <body>
- <style>
- .liz-button {
- text-align: center;
- border: 1px solid #CCC;
- padding: 4px 10px;
- color: #666;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- -khtml-border-radius: 3px;
- border-radius: 3px;
- margin: 10px 30px;
- border: 1px solid #999;
- background-image: -moz-linear-gradient(-90deg, #f7f7f7, #e2e2e2);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #e2e2e2));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#f7f7f7', EndColorStr = '#e2e2e2');
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f7f7f7', EndColorStr='#e2e2e2')";
- }
- .liz-button-hover {
- border-color: #86A33B;
- -moz-box-shadow: 0 2px 10px #AAA;
- -webkit-box-shadow: 0 2px 10px #AAA;
- box-shadow: 0 2px 10px #AAA;
- }
- .liz-button-active {
- background-image: -moz-linear-gradient(-90deg, #e2e2e2, #f7f7f7);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e2e2e2), color-stop(1, #f7f7f7));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#e2e2e2', EndColorStr = '#f7f7f7');
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#f7f7f7')";
- }
- .liz-button-focused {
- -moz-box-shadow: 0 2px 10px #AACF4C;
- -webkit-box-shadow: 0 2px 10px #AACF4C;
- box-shadow: 0 2px 10px #AACF4C;
- }
- .my-button-cls {
- text-align: center;
- background: #AACF4C;
- border: 1px solid #86A33B;
- padding: 4px 10px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- -khtml-border-radius: 3px;
- border-radius: 3px;
- color: white;
- margin: 10px 30px;
- }
- .ks-button-hover {
- border-color: #ff6600;
- -moz-box-shadow: 0 2px 10px #AAA;
- -webkit-box-shadow: 0 2px 10px #AAA;
- box-shadow: 0 2px 10px #AAA;
- }
- </style>
- <script src="assets/demo2.js"></script>
- </body>
- </html>