zoukankan      html  css  js  c++  java

  • 很漂亮的按钮css样式（没有用到图片，可直接拷贝代码使用）

    【转自】http://blog.csdn.net/lushuaiyin/article/details/8118669

    对于程序员，有时候也需要对页面风格做些改动，整体的页面风格还是美工的工作。

    按钮其实是程序员很常用的，如果美工没有设计好，那就自己设计吧。

    在网上发现有乐于奉献的人共享了代码。效果很好，而且没有使用到图片，这个很重要。

    如果你使用别人的css，里面又用到了图片，那这个样式是没法使用的，除非，你能在网上下载使用到的图片，。

    这个网址;  http://www.webdesignerwall.com/demo/css-buttons.html

    我们可以看看效果还是很棒的，查看源代码，里面没有引入css文件，所有按钮的样式都定义在页面上，

    而且没有使用图片！这样我们直接拷贝css就可以使用了，这简直太棒了。

    里面使用了多种html标签做成按钮，有a，input，span，div，p，h3。总有适合你的标签

    这是人家的源码：

    [html] view plaincopy
     
    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.      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.     background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));  
    162.     background: -moz-linear-gradient(top,  #f47a20,  #faa51a);  
    163.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');  
    164. }  
    165.   
    166. /* red */  
    167. .red {  
    168.     color: #faddde;  
    169.     border: solid 1px #980c10;  
    170.     background: #d81b21;  
    171.     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));  
    172.     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);  
    173.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');  
    174. }  
    175. .red:hover {  
    176.     background: #b61318;  
    177.     background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));  
    178.     background: -moz-linear-gradient(top,  #c9151b,  #a11115);  
    179.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');  
    180. }  
    181. .red:active {  
    182.     color: #de898c;  
    183.     background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));  
    184.     background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);  
    185.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');  
    186. }  
    187.   
    188. /* blue */  
    189. .blue {  
    190.     color: #d9eef7;  
    191.     border: solid 1px #0076a3;  
    192.     background: #0095cd;  
    193.     background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));  
    194.     background: -moz-linear-gradient(top,  #00adee,  #0078a5);  
    195.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');  
    196. }  
    197. .blue:hover {  
    198.     background: #007ead;  
    199.     background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));  
    200.     background: -moz-linear-gradient(top,  #0095cc,  #00678e);  
    201.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');  
    202. }  
    203. .blue:active {  
    204.     color: #80bed6;  
    205.     background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));  
    206.     background: -moz-linear-gradient(top,  #0078a5,  #00adee);  
    207.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');  
    208. }  
    209.   
    210. /* rosy */  
    211. .rosy {  
    212.     color: #fae7e9;  
    213.     border: solid 1px #b73948;  
    214.     background: #da5867;  
    215.     background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));  
    216.     background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);  
    217.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');  
    218. }  
    219. .rosy:hover {  
    220.     background: #ba4b58;  
    221.     background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));  
    222.     background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);  
    223.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');  
    224. }  
    225. .rosy:active {  
    226.     color: #dca4ab;  
    227.     background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));  
    228.     background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);  
    229.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');  
    230. }  
    231.   
    232. /* green */  
    233. .green {  
    234.     color: #e8f0de;  
    235.     border: solid 1px #538312;  
    236.     background: #64991e;  
    237.     background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));  
    238.     background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);  
    239.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');  
    240. }  
    241. .green:hover {  
    242.     background: #538018;  
    243.     background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));  
    244.     background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);  
    245.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');  
    246. }  
    247. .green:active {  
    248.     color: #a9c08c;  
    249.     background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));  
    250.     background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);  
    251.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');  
    252. }  
    253.   
    254. /* pink */  
    255. .pink {  
    256.     color: #feeef5;  
    257.     border: solid 1px #d2729e;  
    258.     background: #f895c2;  
    259.     background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));  
    260.     background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);  
    261.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');  
    262. }  
    263. .pink:hover {  
    264.     background: #d57ea5;  
    265.     background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));  
    266.     background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);  
    267.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');  
    268. }  
    269. .pink:active {  
    270.     color: #f3c3d9;  
    271.     background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));  
    272.     background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);  
    273.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');  
    274. }  
    275.   
    276. </style>  
    277. </head>  
    278.   
    279. <body>  
    280. <h1><a href="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3 Gradient Buttons</a></h1>  
    281. <p><em>by</em> <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p>  
    282.   
    283. <div>  
    284.     <a href="#" class="button black">Rectangle</a>  or  
    285.     <a href="#" class="button black bigrounded">Rounded</a> Can be  
    286.     <a href="#" class="button black medium">Medium</a> or   
    287.     <a href="#" class="button black small">Small</a>  
    288.     <br /><br />  
    289.     <input class="button black" type="button" value="Input Element" />   
    290.     <button class="button black">Button Tag</button>  
    291.     <span class="button black">Span</span>   
    292.     <div class="button black">Div</div>   
    293.     <p class="button black">P Tag</p>   
    294.     <h3 class="button black">H3</h3>   
    295. </div>  
    296.   
    297. <div>  
    298.     <a href="#" class="button gray">Gray</a>   
    299.     <a href="#" class="button gray bigrounded">Rounded</a>   
    300.     <a href="#" class="button gray medium">Medium</a>   
    301.     <a href="#" class="button gray small">Small</a>   
    302.     <br /><br />  
    303.     <input class="button gray" type="button" value="Input Element" />   
    304.     <button class="button gray">Button Tag</button>  
    305.     <span class="button gray">Span</span>   
    306.     <div class="button gray">Div</div>   
    307.     <p class="button gray">P Tag</p>   
    308.     <h3 class="button gray">H3</h3>   
    309. </div>  
    310.   
    311. <div>  
    312.     <a href="#" class="button white">White</a>   
    313.     <a href="#" class="button white bigrounded">Rounded</a>   
    314.     <a href="#" class="button white medium">Medium</a>   
    315.     <a href="#" class="button white small">Small</a>   
    316.     <br /><br />  
    317.     <input class="button white" type="button" value="Input Element" />   
    318.     <button class="button white">Button Tag</button>  
    319.     <span class="button white">Span</span>   
    320.     <div class="button white">Div</div>   
    321.     <p class="button white">P Tag</p>   
    322.     <h3 class="button white">H3</h3>   
    323. </div>  
    324.   
    325. <div>  
    326.     <a href="#" class="button orange">Orange</a>   
    327.     <a href="#" class="button orange bigrounded">Rounded</a>   
    328.     <a href="#" class="button orange medium">Medium</a>   
    329.     <a href="#" class="button orange small">Small</a>   
    330.     <br /><br />  
    331.     <input class="button orange" type="button" value="Input Element" />   
    332.     <button class="button orange">Button Tag</button>  
    333.     <span class="button orange">Span</span>   
    334.     <div class="button orange">Div</div>   
    335.     <p class="button orange">P Tag</p>   
    336.     <h3 class="button orange">H3</h3>   
    337. </div>  
    338.   
    339. <div>  
    340.     <a href="#" class="button red">Red</a>   
    341.     <a href="#" class="button red bigrounded">Rounded</a>   
    342.     <a href="#" class="button red medium">Medium</a>   
    343.     <a href="#" class="button red small">Small</a>   
    344.     <br /><br />  
    345.     <input class="button red" type="button" value="Input Element" />   
    346.     <button class="button red">Button Tag</button>  
    347.     <span class="button red">Span</span>   
    348.     <div class="button red">Div</div>   
    349.     <p class="button red">P Tag</p>   
    350.     <h3 class="button red">H3</h3>   
    351. </div>  
    352.   
    353. <div>  
    354.     <a href="#" class="button blue">Blue</a>   
    355.     <a href="#" class="button blue bigrounded">Rounded</a>   
    356.     <a href="#" class="button blue medium">Medium</a>   
    357.     <a href="#" class="button blue small">Small</a>   
    358.     <br /><br />  
    359.     <input class="button blue" type="button" value="Input Element" />   
    360.     <button class="button blue">Button Tag</button>  
    361.     <span class="button blue">Span</span>   
    362.     <div class="button blue">Div</div>   
    363.     <p class="button blue">P Tag</p>   
    364.     <h3 class="button blue">H3</h3>   
    365. </div>  
    366.   
    367. <div>  
    368.     <a href="#" class="button rosy">Rosy</a>   
    369.     <a href="#" class="button rosy bigrounded">Rounded</a>   
    370.     <a href="#" class="button rosy medium">Medium</a>   
    371.     <a href="#" class="button rosy small">Small</a>   
    372.     <br /><br />  
    373.     <input class="button rosy" type="button" value="Input Element" />   
    374.     <button class="button rosy">Button Tag</button>  
    375.     <span class="button rosy">Span</span>   
    376.     <div class="button rosy">Div</div>   
    377.     <p class="button rosy">P Tag</p>   
    378.     <h3 class="button rosy">H3</h3>   
    379. </div>  
    380.   
    381. <div>  
    382.     <a href="#" class="button green">Green</a>   
    383.     <a href="#" class="button green bigrounded">Rounded</a>   
    384.     <a href="#" class="button green medium">Medium</a>   
    385.     <a href="#" class="button green small">Small</a>   
    386.     <br /><br />  
    387.     <input class="button green" type="button" value="Input Element" />   
    388.     <button class="button green">Button Tag</button>  
    389.     <span class="button green">Span</span>   
    390.     <div class="button green">Div</div>   
    391.     <p class="button green">P Tag</p>   
    392.     <h3 class="button green">H3</h3>   
    393. </div>  
    394.   
    395. <div>  
    396.     <a href="#" class="button pink">Pink</a>   
    397.     <a href="#" class="button pink bigrounded">Rounded</a>   
    398.     <a href="#" class="button pink medium">Medium</a>   
    399.     <a href="#" class="button pink small">Small</a>   
    400.     <br /><br />  
    401.     <input class="button pink" type="button" value="Input Element" />   
    402.     <button class="button pink">Button Tag</button>  
    403.     <span class="button pink">Span</span>   
    404.     <div class="button pink">Div</div>   
    405.     <p class="button pink">P Tag</p>   
    406.     <h3 class="button pink">H3</h3>   
    407. </div>  
    408.   
    409. </body>  
    410. </html>  


    效果图片：

    是不是很棒？

    感谢 http://webdesignerwall.com/tutorials/css3-gradient-buttons  分享
  • 相关阅读:
    RabbitMQ 记录
    RabbitMQ 问题记录
    (转)非常完善的Log4net详细说明
    (转)【推荐】初级.NET程序员，你必须知道的EF知识和经验
    移动相关
    （转）2014年最新前端开发面试题（题目列表+答案 完整版）
    Unity IOC容器的简单应用（转）
    httpclient模拟post请求json封装表单数据
    《SpringMVC从入门到放肆》六、SpringMVC开发Controller的方法总结
    《SpringMVC从入门到放肆》五、SpringMVC配置式开发（处理器适配器）
  • 原文地址：https://www.cnblogs.com/ymy124/p/3935274.html
Copyright © 2011-2022 走看看