首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2013-04-12 
很漂亮的按钮css样式（没有用到图片，可直接拷贝代码使用）转自：http://blog.csdn.net/lushuaiyin/article/de

很漂亮的按钮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. ????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.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>??


效果图片：

?

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

?

是不是很棒？

感谢?http://webdesignerwall.com/tutorials/css3-gradient-buttons? 分享

读书人精选
热点排行