<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{background: #ededed; color: #999; margin: 32px auto; } .button{ /*定义渐进按钮的样式*/ display: inline-block; /*zoom与display属性都为了兼容IE7,使其具有 disply：inlineblock特性*/ zoom: 1; *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% arial,sans-serif,helvetica; padding: .5em 2em .55em; /*设计按钮圆角和阴影特效*/ text-shadow: 0 1px 1px rgba(0, 0, 0, .3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .button:hover{ text-decoration: none; } .button:active{ position: relative; top: 1px; } .bigrounded{ /*定义大圆角类样式*/ -webkit-border-radius: 2em; -moz-borser-radius:2em; border-radius: 2em; } .medium{ /*定义中等按钮样式*/ font-size: 12px; padding: .4em 1.5em .42em; } .small{ /*定义小按钮*/ font-size: 11px; padding: .2em 1em .275em; } /*设计颜色样式类：黑色按钮 通过不同的颜色样式类，可以设计不同的按钮风格*/ .black { /* 黑色样式类 */ color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); background: linear-gradient(to bottom, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');} .black:hover { /* 黑色鼠标经过样式类 */ background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); background: linear-gradient(to bottom, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}.black:active { /* 黑色鼠标激活样式类 */ color: #666; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); background: linear-gradient(to bottom, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');} </style> <body> <div> <a href="#" class="button black">圆角按钮</a> <a href="#" class="button black bigrounded">大号椭圆按钮</a> <a href="#" class="button black medium">中号按钮</a> <a href="#" class="button black small">小号按钮</a> <br /> </div> </body></html>您可以打开连接查看： http://runjs.cn/detail/b0muxozn