你的位置:首页 > 网页设计

[网页设计]纯CSS打造好看的按钮样式


好看的按钮、链接、div样式,效果预览:

http://hovertree.com/code/run/css/s8o19792.html

发现今天积分和排名不错:

代码如下:

 1 <!DOCTYPE html> 2 <html ="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> or311     <a href="http://hovertree.com/" class="hwq2button black bigrounded">Rounded</a> Can be312     <a href="http://hovertree.com/texiao/" class="hwq2button black medium">Medium</a> or313     <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