纯CSS打造好看的按钮样式
好看的按钮、链接、div样式,效果预览：
http://hovertree.com/code/run/css/s8o19792.html
发现今天积分和排名不错：
代码如下：
1 <!DOCTYPE html> 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>CSS3按钮样式 - 何问起</title><base target="_blank" /> 6 <style type="text/css"> 7 body { 8 background: #ededed; 9 width: 900px; 10 margin: 30px auto; 11 color: #999; 12 } 13 14 p { 15 margin: 0 0 2em; 16 } 17 18 h1 { 19 margin: 0; 20 } 21 22 a { 23 color: #339; 24 text-decoration: none; 25 } 26 27 a:hover { 28 text-decoration: underline; 29 } 30 31 div { 32 padding: 20px 0; 33 border-bottom: solid 1px #ccc; 34 } 35 36 /* button 37 ---------------------------------------------- */ 38 .hwq2button { 39 display: inline-block; 40 zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 41 *display: inline; 42 vertical-align: baseline; 43 margin: 0 2px; 44 outline: none; 45 cursor: pointer; 46 text-align: center; 47 text-decoration: none; 48 font: 14px/100% Arial, Helvetica, sans-serif; 49 padding: .5em 2em .55em; 50 text-shadow: 0 1px 1px rgba(0,0,0,.3); 51 -webkit-border-radius: .5em; 52 -moz-border-radius: .5em; 53 border-radius: .5em; 54 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 55 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 56 box-shadow: 0 1px 2px rgba(0,0,0,.2); 57 } 58 59 .hwq2button:hover { 60 text-decoration: none; 61 } 62 63 .hwq2button:active { 64 position: relative; 65 top: 1px; 66 } 67 68 .bigrounded { 69 -webkit-border-radius: 2em; 70 -moz-border-radius: 2em; 71 border-radius: 2em; 72 } 73 74 .medium { 75 font-size: 12px; 76 padding: .4em 1.5em .42em; 77 } 78 79 .small { 80 font-size: 11px; 81 padding: .2em 1em .275em; 82 } 83 84 /* color styles 85 ---------------------------------------------- */ 86 87 /* black */ 88 .black { 89 color: #d7d7d7; 90 border: solid 1px #333; 91 background: #333; 92 background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); 93 background: -moz-linear-gradient(top, #666, #000); 94 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); 95 } 96 97 .black:hover { 98 background: #000; 99 background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); 100 background: -moz-linear-gradient(top, #444, #000); 101 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); 102 } 103 104 .black:active { 105 color: #666; 106 background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); 107 background: -moz-linear-gradient(top, #000, #444); 108 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); 109 } 110 111 /* gray */ 112 .gray { 113 color: #e9e9e9; 114 border: solid 1px #555; 115 background: #6e6e6e; 116 background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); 117 background: -moz-linear-gradient(top, #888, #575757); 118 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 119 } 120 121 .gray:hover { 122 background: #616161; 123 background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); 124 background: -moz-linear-gradient(top, #757575, #4b4b4b); 125 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b'); 126 } 127 128 .gray:active { 129 color: #afafaf; 130 background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)); 131 background: -moz-linear-gradient(top, #575757, #888); 132 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888'); 133 } 134 135 /* white */ 136 .white { 137 color: #606060; 138 border: solid 1px #b7b7b7; 139 background: #fff; 140 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); 141 background: -moz-linear-gradient(top, #fff, #ededed); 142 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); 143 } 144 145 .white:hover { 146 background: #ededed; 147 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); 148 background: -moz-linear-gradient(top, #fff, #dcdcdc); 149 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); 150 } 151 152 .white:active { 153 color: #999; 154 background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); 155 background: -moz-linear-gradient(top, #ededed, #fff); 156 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); 157 } 158 159 /* orange */ 160 .orange { 161 color: #fef4e9; 162 border: solid 1px #da7c0c; 163 background: #f78d1d; 164 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 165 background: -moz-linear-gradient(top, #faa51a, #f47a20); 166 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 167 } 168 169 .orange:hover { 170 background: #f47c20; 171 background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 172 background: -moz-linear-gradient(top, #f88e11, #f06015); 173 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); 174 } 175 176 .orange:active { 177 color: #fcd3a5; 178 background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 179 background: -moz-linear-gradient(top, #f47a20, #faa51a); 180 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); 181 } 182 183 /* red */ 184 .red { 185 color: #faddde; 186 border: solid 1px #980c10; 187 background: #d81b21; 188 background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); 189 background: -moz-linear-gradient(top, #ed1c24, #aa1317); 190 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); 191 } 192 193 .red:hover { 194 background: #b61318; 195 background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); 196 background: -moz-linear-gradient(top, #c9151b, #a11115); 197 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); 198 } 199 200 .red:active { 201 color: #de898c; 202 background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); 203 background: -moz-linear-gradient(top, #aa1317, #ed1c24); 204 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24'); 205 } 206 207 /* blue */ 208 .blue { 209 color: #d9eef7; 210 border: solid 1px #0076a3; 211 background: #0095cd; 212 background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 213 background: -moz-linear-gradient(top, #00adee, #0078a5); 214 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); 215 } 216 217 .blue:hover { 218 background: #007ead; 219 background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 220 background: -moz-linear-gradient(top, #0095cc, #00678e); 221 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); 222 } 223 224 .blue:active { 225 color: #80bed6; 226 background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 227 background: -moz-linear-gradient(top, #0078a5, #00adee); 228 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); 229 } 230 231 /* rosy */ 232 .rosy { 233 color: #fae7e9; 234 border: solid 1px #b73948; 235 background: #da5867; 236 background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)); 237 background: -moz-linear-gradient(top, #f16c7c, #bf404f); 238 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f'); 239 } 240 241 .rosy:hover { 242 background: #ba4b58; 243 background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)); 244 background: -moz-linear-gradient(top, #cf5d6a, #a53845); 245 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845'); 246 } 247 248 .rosy:active { 249 color: #dca4ab; 250 background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)); 251 background: -moz-linear-gradient(top, #bf404f, #f16c7c); 252 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c'); 253 } 254 255 /* green */ 256 .green { 257 color: #e8f0de; 258 border: solid 1px #538312; 259 background: #64991e; 260 background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); 261 background: -moz-linear-gradient(top, #7db72f, #4e7d0e); 262 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); 263 } 264 265 .green:hover { 266 background: #538018; 267 background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); 268 background: -moz-linear-gradient(top, #6b9d28, #436b0c); 269 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); 270 } 271 272 .green:active { 273 color: #a9c08c; 274 background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); 275 background: -moz-linear-gradient(top, #4e7d0e, #7db72f); 276 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f'); 277 } 278 279 /* pink */ 280 .pink { 281 color: #feeef5; 282 border: solid 1px #d2729e; 283 background: #f895c2; 284 background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)); 285 background: -moz-linear-gradient(top, #feb1d3, #f171ab); 286 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab'); 287 } 288 289 .pink:hover { 290 background: #d57ea5; 291 background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); 292 background: -moz-linear-gradient(top, #f4aacb, #e86ca4); 293 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4'); 294 } 295 296 .pink:active { 297 color: #f3c3d9; 298 background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)); 299 background: -moz-linear-gradient(top, #f171ab, #feb1d3); 300 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3'); 301 } 302 </style> 303 </head> 304 305 <body> 306 <h1><a href="http://hovertree.com/code/run/css/s8o19792.html">CSS3 按钮样式</a></h1> 307 <p><em>by</em> <a href="http://hovertree.com">何问起</a></p> 308 309 <div> 310 <a href="http://hovertree.com/" class="hwq2button black">Rectangle</a> or 311 <a href="http://hovertree.com/" class="hwq2button black bigrounded">Rounded</a> Can be 312 <a href="http://hovertree.com/texiao/" class="hwq2button black medium">Medium</a> or 313 <a href="http://hovertree.com/" class="hwq2button black small">Small</a> 314 <br /><br /> 315 <input class="hwq2button black" type="button" value="Input Element" /> 316 <button class="hwq2button black">Button Tag</button> 317 <span class="hwq2button black">Span</span> 318 <div class="hwq2button black">Div</div> 319 <p class="hwq2button black">P Tag</p> 320 <h3 class="hwq2button black">H3</h3> 321 </div> 322 323 <div> 324 <a href="http://run.hovertree.com/" class="hwq2button gray">Gray</a> 325 <a href="http://hovertree.com/" class="hwq2button gray bigrounded">Rounded</a> 326 <a href="http://hovertree.com/" class="hwq2button gray medium">Medium</a> 327 <a href="http://hovertree.com/tiku/" class="hwq2button gray small">Small</a> 328 <br /><br /> 329 <input class="hwq2button gray" type="button" value="Input Element" /> 330 <button class="hwq2button gray">Button Tag</button> 331 <span class="hwq2button gray">Span</span> 332 <div class="hwq2button gray">Div</div> 333 <p class="hwq2button gray">P Tag</p> 334 <h3 class="hwq2button gray">H3</h3> 335 </div> 336 337 <div> 338 <a href="http://hovertree.com/code/css/s8o19792.htm" class="hwq2button white">White</a> 339 <a href="http://hovertree.com/" class="hwq2button white bigrounded">Rounded</a> 340 <a href="http://hovertree.com/" class="hwq2button white medium">Medium</a> 341 <a href="http://hovertree.com/" class="hwq2button white small">Small</a> 342 <br /><br /> 343 <input class="hwq2button white" type="button" value="Input Element" /> 344 <button class="hwq2button white">Button Tag</button> 345 <span class="hwq2button white">Span</span> 346 <div class="hwq2button white">Div</div> 347 <p class="hwq2button white">P Tag</p> 348 <h3 class="hwq2button white">H3</h3> 349 </div> 350 351 <div> 352 <a href="http://hovertree.com/" class="hwq2button orange">Orange</a> 353 <a href="http://hovertree.com/" class="hwq2button orange bigrounded">Rounded</a> 354 <a href="http://hovertree.com/" class="hwq2button orange medium">Medium</a> 355 <a href="http://hovertree.com/" class="hwq2button orange small">Small</a> 356 <br /><br /> 357 <input class="hwq2button orange" type="button" value="Input Element" /> 358 <button class="hwq2button orange">Button Tag</button> 359 <span class="hwq2button orange">Span</span> 360 <div class="hwq2button orange">Div</div> 361 <p class="hwq2button orange">P Tag</p> 362 <h3 class="hwq2button orange">H3</h3> 363 </div> 364 365 <div> 366 <a href="http://hovertree.com/h/bjaf/5fkkjxlq.htm" class="hwq2button red">Red</a> 367 <a href="http://hovertree.com/" class="hwq2button red bigrounded">Rounded</a> 368 <a href="http://hovertree.com/" class="hwq2button red medium">Medium</a> 369 <a href="http://cms.hovertree.com/" class="hwq2button red small">Small</a> 370 <br /><br /> 371 <input class="hwq2button red" type="button" value="Input Element" /> 372 <button class="hwq2button red">Button Tag</button> 373 <span class="hwq2button red">Span</span> 374 <div class="hwq2button red">Div</div> 375 <p class="hwq2button red">P Tag</p> 376 <h3 class="hwq2button red">H3</h3> 377 </div> 378 379 <div> 380 <a href="http://hovertree.com/" class="hwq2button blue">Blue</a> 381 <a href="http://hovertree.com/" class="hwq2button blue bigrounded">Rounded</a> 382 <a href="http://hovertree.com/" class="hwq2button blue medium">Medium</a> 383 <a href="http://hovertree.com/" class="hwq2button blue small">Small</a> 384 <br /><br /> 385 <input class="hwq2button blue" type="button" value="Input Element" /> 386 <button class="hwq2button blue">Button Tag</button> 387 <span class="hwq2button blue">Span</span> 388 <div class="hwq2button blue">Div</div> 389 <p class="hwq2button blue">P Tag</p> 390 <h3 class="hwq2button blue">H3</h3> 391 </div> 392 393 <div> 394 <a href="http://m.hovertree.com/" class="hwq2button rosy">Rosy</a> 395 <a href="http://hovertree.com/" class="hwq2button rosy bigrounded">Rounded</a> 396 <a href="http://hovertree.com/" class="hwq2button rosy medium">Medium</a> 397 <a href="http://hovertree.com/" class="hwq2button rosy small">Small</a> 398 <br /><br /> 399 <input class="hwq2button rosy" type="button" value="Input Element" /> 400 <button class="hwq2button rosy">Button Tag</button> 401 <span class="hwq2button rosy">Span</span> 402 <div class="hwq2button rosy">Div</div> 403 <p class="hwq2button rosy">P Tag</p> 404 <h3 class="hwq2button rosy">H3</h3> 405 </div> 406 407 <div> 408 <a href="http://hovertree.com/" class="hwq2button green">Green</a> 409 <a href="http://hovertree.com/" class="hwq2button green bigrounded">Rounded</a> 410 <a href="http://hovertree.com/" class="hwq2button green medium">Medium</a> 411 <a href="http://tool.hovertree.com/" class="hwq2button green small">Small</a> 412 <br /><br /> 413 <input class="hwq2button green" type="button" value="Input Element" /> 414 <button class="hwq2button green">Button Tag</button> 415 <span class="hwq2button green">Span</span> 416 <div class="hwq2button green">Div</div> 417 <p class="hwq2button green">P Tag</p> 418 <h3 class="hwq2button green">H3</h3> 419 </div> 420 421 <div> 422 <a href="http://hovertree.com/" class="hwq2button pink">Pink</a> 423 <a href="http://hovertree.com/code/" class="hwq2button pink bigrounded">Rounded</a> 424 <a href="http://hovertree.com/h/" class="hwq2button pink medium">Medium</a> 425 <a href="http://hovertree.com/" class="hwq2button pink small">Small</a> 426 <br /><br /> 427 <input class="hwq2button pink" type="button" value="Input Element" /> 428 <button class="hwq2button pink">Button Tag</button> 429 <span class="hwq2button pink">Span</span> 430 <div class="hwq2button pink">Div</div> 431 <p class="hwq2button pink">P Tag</p> 432 <h3 class="hwq2button pink">H3</h3> 433 </div> 434 435 </body> 436 </html>
转自：http://hovertree.com/code/css/s8o19792.htm
更多特效：http://www.cnblogs.com/jihua/p/webfront.html