对于程序员，有时候也需要对页面风格做些改动，整体的页面风格还是美工的工作。
按钮其实是程序员很常用的，如果美工没有设计好，那就自己设计吧。
在网上发现有乐于奉献的人共享了代码。效果很好，而且没有使用到图片，这个很重要。
如果你使用别人的css，里面又用到了图片，那这个样式是没法使用的，除非，你能在网上下载使用到的图片，。
这个网址; http://www.webdesignerwall.com/demo/css-buttons.html
我们可以看看效果还是很棒的，查看源代码，里面没有引入css文件，所有按钮的样式都定义在页面上，
而且没有使用图片！这样我们直接拷贝css就可以使用了，这简直太棒了。
里面使用了多种html标签做成按钮，有a，input，span，div，p，h3。总有适合你的标签
这是人家的源码：
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
效果图片：
