好看的按钮、链接、div样式,效果预览：http://hovertree.com/code/run/css/s8o19792.html发现今天积分和排名不错：代码如下： 1 <!DOCTYPE html> 2 <html ="http://www.w3 ...
好看的按钮、链接、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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：纯CSS打造好看的按钮样式
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
