PageRenderTime 39ms CodeModel.GetById 15ms RepoModel.GetById 0ms app.codeStats 0ms

/1.3/source/raw/demo/button/demo2.html

https://github.com/kissyteam/kissyteam.github.com
HTML | 70 lines | 66 code | 4 blank | 0 comment | 0 complexity | df98e59c2f199d70b56b7dda0441bc77 MD5 | raw file
Possible License(s): Apache-2.0 
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8"/>
    5. 

  5. <title>Demo - 定制button的样式</title>
    6. 

  6. <link href="http://g.tbcdn.cn/kissy/k/1.3.2/css/dpl/base.css" rel="stylesheet"/>
    7. 

  7. <link href="assets/common.css" rel="stylesheet"/>
    8. 

  8. <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>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11. 

  12. <style>
    13. 

  13. 

  14. .liz-button {
    15. 

  15.     text-align: center;
    16. 

  16.     border: 1px solid #CCC;
    17. 

  17.     padding: 4px 10px;
    18. 

  18.     color: #666;
    19. 

  19.     -moz-border-radius: 3px;
    20. 

  20.     -webkit-border-radius: 3px;
    21. 

  21.     -khtml-border-radius: 3px;
    22. 

  22.     border-radius: 3px;
    23. 

  23.     margin: 10px 30px;
    24. 

  24. 

  25.     border: 1px solid #999;
    26. 

  26.     background-image: -moz-linear-gradient(-90deg, #f7f7f7, #e2e2e2);
    27. 

  27.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7), color-stop(1, #e2e2e2));
    28. 

  28.     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#f7f7f7', EndColorStr = '#e2e2e2');
    29. 

  29.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f7f7f7', EndColorStr='#e2e2e2')";
    30. 

  30. }
    31. 

  31. .liz-button-hover {
    32. 

  32.     border-color: #86A33B;
    33. 

  33.     -moz-box-shadow: 0 2px 10px #AAA;
    34. 

  34.     -webkit-box-shadow: 0 2px 10px #AAA;
    35. 

  35.     box-shadow: 0 2px 10px #AAA;
    36. 

  36. }
    37. 

  37. .liz-button-active {
    38. 

  38.     background-image: -moz-linear-gradient(-90deg, #e2e2e2, #f7f7f7);
    39. 

  39.     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e2e2e2), color-stop(1, #f7f7f7));
    40. 

  40.     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#e2e2e2', EndColorStr = '#f7f7f7');
    41. 

  41.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#f7f7f7')";
    42. 

  42. }
    43. 

  43. .liz-button-focused {
    44. 

  44.     -moz-box-shadow: 0 2px 10px #AACF4C;
    45. 

  45.     -webkit-box-shadow: 0 2px 10px #AACF4C;
    46. 

  46.     box-shadow: 0 2px 10px #AACF4C;
    47. 

  47. }
    48. 

  48. .my-button-cls {
    49. 

  49.     text-align: center;
    50. 

  50.     background: #AACF4C;
    51. 

  51.     border: 1px solid #86A33B;
    52. 

  52.     padding: 4px 10px;
    53. 

  53. 

  54.     -moz-border-radius: 3px;
    55. 

  55.     -webkit-border-radius: 3px;
    56. 

  56.     -khtml-border-radius: 3px;
    57. 

  57.     border-radius: 3px;
    58. 

  58.     color: white;
    59. 

  59.     margin: 10px 30px;
    60. 

  60. }
    61. 

  61. .ks-button-hover {
    62. 

  62.     border-color: #ff6600;
    63. 

  63.     -moz-box-shadow: 0 2px 10px #AAA;
    64. 

  64.     -webkit-box-shadow: 0 2px 10px #AAA;
    65. 

  65.     box-shadow: 0 2px 10px #AAA;
    66. 

  66. }
    67. 

  67. </style>
    68. 

  68. <script src="assets/demo2.js"></script>
    69. 

  69. </body>
    70. 

  70. </html>
    71.