纯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

你可能感兴趣的:(纯CSS打造好看的按钮样式)