漂亮的CSS样式 按钮类

个人日记

感谢各位肯将自己源码公开的大神~~~

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <title>Demo: CSS3 Buttons</title>  
  6. <style type="text/css">  
  7. body {  
  8.     background: #ededed;  
  9.     width: 900px;  
  10.     margin: 30px auto;  
  11.     color: #999;  
  12. }  
  13. p {  
  14.     margin: 0 0 2em;  
  15. }  
  16. h1 {  
  17.     margin: 0;  
  18. }  
  19. a {  
  20.     color: #339;  
  21.     text-decoration: none;  
  22. }  
  23. a:hover {  
  24.     text-decoration: underline;  
  25. }  
  26. div {  
  27.     padding: 20px 0;  
  28.     border-bottom: solid 1px #ccc;  
  29. }  
  30.   
  31. /* button   
  32. ---------------------------------------------- */  
  33. .button {  
  34.     display: inline-block;  
  35.     zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */  
  36.     *display: inline;  
  37.     vertical-align: baseline;  
  38.     margin: 0 2px;  
  39.     outline: none;  
  40.     cursor: pointer;  
  41.     text-align: center;  
  42.     text-decoration: none;  
  43.     font: 14px/100% Arial, Helvetica, sans-serif;  
  44.     padding: .5em 2em .55em;  
  45.     text-shadow: 0 1px 1px rgba(0,0,0,.3);  
  46.     -webkit-border-radius: .5em;   
  47.     -moz-border-radius: .5em;  
  48.     border-radius: .5em;  
  49.     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  50.     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  51.     box-shadow: 0 1px 2px rgba(0,0,0,.2);  
  52. }  
  53. .button:hover {  
  54.     text-decoration: none;  
  55. }  
  56. .button:active {  
  57.     position: relative;  
  58.     top: 1px;  
  59. }  
  60.   
  61. .bigrounded {  
  62.     -webkit-border-radius: 2em;  
  63.     -moz-border-radius: 2em;  
  64.     border-radius: 2em;  
  65. }  
  66. .medium {  
  67.     font-size: 12px;  
  68.     padding: .4em 1.5em .42em;  
  69. }  
  70. .small {  
  71.     font-size: 11px;  
  72.     padding: .2em 1em .275em;  
  73. }  
  74.   
  75. /* color styles   
  76. ---------------------------------------------- */  
  77.   
  78. /* black */  
  79. .black {  
  80.     color: #d7d7d7;  
  81.     border: solid 1px #333;  
  82.     background: #333;  
  83.     background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));  
  84.     background: -moz-linear-gradient(top,  #666,  #000);  
  85.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');  
  86. }  
  87. .black:hover {  
  88.     background: #000;  
  89.     background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));  
  90.     background: -moz-linear-gradient(top,  #444,  #000);  
  91.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');  
  92. }  
  93. .black:active {  
  94.     color: #666;  
  95.     background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));  
  96.     background: -moz-linear-gradient(top,  #000,  #444);  
  97.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');  
  98. }  
  99.   
  100. /* gray */  
  101. .gray {  
  102.     color: #e9e9e9;  
  103.     border: solid 1px #555;  
  104.     background: #6e6e6e;  
  105.     background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));  
  106.     background: -moz-linear-gradient(top,  #888,  #575757);  
  107.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');  
  108. }  
  109. .gray:hover {  
  110.     background: #616161;  
  111.     background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));  
  112.     background: -moz-linear-gradient(top,  #757575,  #4b4b4b);  
  113.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');  
  114. }  
  115. .gray:active {  
  116.     color: #afafaf;  
  117.     background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));  
  118.     background: -moz-linear-gradient(top,  #575757,  #888);  
  119.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');  
  120. }  
  121.   
  122. /* white */  
  123. .white {  
  124.     color: #606060;  
  125.     border: solid 1px #b7b7b7;  
  126.     background: #fff;  
  127.     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));  
  128.     background: -moz-linear-gradient(top,  #fff,  #ededed);  
  129.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');  
  130. }  
  131. .white:hover {  
  132.     background: #ededed;  
  133.     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));  
  134.     background: -moz-linear-gradient(top,  #fff,  #dcdcdc);  
  135.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');  
  136. }  
  137. .white:active {  
  138.     color: #999;  
  139.     background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));  
  140.     background: -moz-linear-gradient(top,  #ededed,  #fff);  
  141.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');  
  142. }  
  143.   
  144. /* orange */  
  145. .orange {  
  146.     color: #fef4e9;  
  147.     border: solid 1px #da7c0c;  
  148.     background: #f78d1d;  
  149.     background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));  
  150.     background: -moz-linear-gradient(top,  #faa51a,  #f47a20);  
  151.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');  
  152. }  
  153. .orange:hover {  
  154.     background: #f47c20;  
  155.     background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));  
  156.     background: -moz-linear-gradient(top,  #f88e11,  #f06015);  
  157.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');  
  158. }  
  159. .orange:active {  
  160.     color: #fcd3a5;  

  161. 文章评论

    South.

    网页大部分本来就是开源的