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

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

2024-07-19 09:48:56   223人阅读

【转自】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.     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.     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.mamicode.com/"http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3 Gradient Buttons</a></h1>  
  281. <p><em>by</em> <a href=http://www.mamicode.com/"http://www.webdesignerwall.com">Web Designer Wall</a></p>  
  282.   
  283. <div>  
  284.     <a href=http://www.mamicode.com/"#" class="button black">Rectangle</a>  or  
  285.     <a href=http://www.mamicode.com/"#" class="button black bigrounded">Rounded</a> Can be  
  286.     <a href=http://www.mamicode.com/"#" class="button black medium">Medium</a> or   
  287.     <a href=http://www.mamicode.com/"#" class="button black small">Small</a>  
  288.     <br /><br />  
  289.     <input class="button black" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button gray">Gray</a>   
  299.     <a href=http://www.mamicode.com/"#" class="button gray bigrounded">Rounded</a>   
  300.     <a href=http://www.mamicode.com/"#" class="button gray medium">Medium</a>   
  301.     <a href=http://www.mamicode.com/"#" class="button gray small">Small</a>   
  302.     <br /><br />  
  303.     <input class="button gray" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button white">White</a>   
  313.     <a href=http://www.mamicode.com/"#" class="button white bigrounded">Rounded</a>   
  314.     <a href=http://www.mamicode.com/"#" class="button white medium">Medium</a>   
  315.     <a href=http://www.mamicode.com/"#" class="button white small">Small</a>   
  316.     <br /><br />  
  317.     <input class="button white" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button orange">Orange</a>   
  327.     <a href=http://www.mamicode.com/"#" class="button orange bigrounded">Rounded</a>   
  328.     <a href=http://www.mamicode.com/"#" class="button orange medium">Medium</a>   
  329.     <a href=http://www.mamicode.com/"#" class="button orange small">Small</a>   
  330.     <br /><br />  
  331.     <input class="button orange" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button red">Red</a>   
  341.     <a href=http://www.mamicode.com/"#" class="button red bigrounded">Rounded</a>   
  342.     <a href=http://www.mamicode.com/"#" class="button red medium">Medium</a>   
  343.     <a href=http://www.mamicode.com/"#" class="button red small">Small</a>   
  344.     <br /><br />  
  345.     <input class="button red" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button blue">Blue</a>   
  355.     <a href=http://www.mamicode.com/"#" class="button blue bigrounded">Rounded</a>   
  356.     <a href=http://www.mamicode.com/"#" class="button blue medium">Medium</a>   
  357.     <a href=http://www.mamicode.com/"#" class="button blue small">Small</a>   
  358.     <br /><br />  
  359.     <input class="button blue" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button rosy">Rosy</a>   
  369.     <a href=http://www.mamicode.com/"#" class="button rosy bigrounded">Rounded</a>   
  370.     <a href=http://www.mamicode.com/"#" class="button rosy medium">Medium</a>   
  371.     <a href=http://www.mamicode.com/"#" class="button rosy small">Small</a>   
  372.     <br /><br />  
  373.     <input class="button rosy" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button green">Green</a>   
  383.     <a href=http://www.mamicode.com/"#" class="button green bigrounded">Rounded</a>   
  384.     <a href=http://www.mamicode.com/"#" class="button green medium">Medium</a>   
  385.     <a href=http://www.mamicode.com/"#" class="button green small">Small</a>   
  386.     <br /><br />  
  387.     <input class="button green" type="button" value=http://www.mamicode.com/"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=http://www.mamicode.com/"#" class="button pink">Pink</a>   
  397.     <a href=http://www.mamicode.com/"#" class="button pink bigrounded">Rounded</a>   
  398.     <a href=http://www.mamicode.com/"#" class="button pink medium">Medium</a>   
  399.     <a href=http://www.mamicode.com/"#" class="button pink small">Small</a>   
  400.     <br /><br />  
  401.     <input class="button pink" type="button" value=http://www.mamicode.com/"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  分享

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


联系
我们