以下是 Bootstrap水晶玻璃按钮特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap水晶玻璃按钮特效 </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th rowspan="2"> </th>
<th colspan="3" class="text-center">default</th>
<th colspan="3" class="text-center">primary</th>
<th colspan="3" class="text-center">info</th>
<th colspan="3" class="text-center">success</th>
<th colspan="3" class="text-center">warning</th>
<th colspan="3" class="text-center">danger</th>
<th colspan="3" class="text-center">link</th>
</tr>
<tr>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
<th class="text-center">normal</th>
<th class="text-center">disabled</th>
<th class="text-center">active</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">xs / round</th>
<td>
<button class="btn btn-default btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-xs btn-round">C</btn>
</td>
<td>
<button class="btn btn-primary btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-xs btn-round">C</btn>
</td>
<td>
<button class="btn btn-info btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-xs btn-round">C</btn>
</td>
<td>
<button class="btn btn-success btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-xs btn-round">C</btn>
</td>
<td>
<button class="btn btn-warning btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-xs btn-round">C</btn>
</td>
<td>
<button class="btn btn-danger btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-xs btn-round">C</btn>
</td>
<td>
<button class="btn btn-link btn-xs btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-xs btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-xs btn-round">C</btn>
</td>
</tr>
<tr>
<th scope="row">xs / square</th>
<td>
<button class="btn btn-default btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-xs btn-square">C</btn>
</td>
<td>
<button class="btn btn-primary btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-xs btn-square">C</btn>
</td>
<td>
<button class="btn btn-info btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-xs btn-square">C</btn>
</td>
<td>
<button class="btn btn-success btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-xs btn-square">C</btn>
</td>
<td>
<button class="btn btn-warning btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-xs btn-square">C</btn>
</td>
<td>
<button class="btn btn-danger btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-xs btn-square">C</btn>
</td>
<td>
<button class="btn btn-link btn-xs btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-xs btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-xs btn-square">C</btn>
</td>
</tr>
<tr>
<th scope="row">sm / round</th>
<td>
<button class="btn btn-default btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-sm btn-round">C</btn>
</td>
<td>
<button class="btn btn-primary btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-sm btn-round">C</btn>
</td>
<td>
<button class="btn btn-info btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-sm btn-round">C</btn>
</td>
<td>
<button class="btn btn-success btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-sm btn-round">C</btn>
</td>
<td>
<button class="btn btn-warning btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-sm btn-round">C</btn>
</td>
<td>
<button class="btn btn-danger btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-sm btn-round">C</btn>
</td>
<td>
<button class="btn btn-link btn-sm btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-sm btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-sm btn-round">C</btn>
</td>
</tr>
<tr>
<th scope="row">sm / square</th>
<td>
<button class="btn btn-default btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-sm btn-square">C</btn>
</td>
<td>
<button class="btn btn-primary btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-sm btn-square">C</btn>
</td>
<td>
<button class="btn btn-info btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-sm btn-square">C</btn>
</td>
<td>
<button class="btn btn-success btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-sm btn-square">C</btn>
</td>
<td>
<button class="btn btn-warning btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-sm btn-square">C</btn>
</td>
<td>
<button class="btn btn-danger btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-sm btn-square">C</btn>
</td>
<td>
<button class="btn btn-link btn-sm btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-sm btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-sm btn-square">C</btn>
</td>
</tr>
<tr>
<th scope="row">md / round</th>
<td>
<button class="btn btn-default btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-md btn-round">C</btn>
</td>
<td>
<button class="btn btn-primary btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-md btn-round">C</btn>
</td>
<td>
<button class="btn btn-info btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-md btn-round">C</btn>
</td>
<td>
<button class="btn btn-success btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-md btn-round">C</btn>
</td>
<td>
<button class="btn btn-warning btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-md btn-round">C</btn>
</td>
<td>
<button class="btn btn-danger btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-md btn-round">C</btn>
</td>
<td>
<button class="btn btn-link btn-md btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-md btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-md btn-round">C</btn>
</td>
</tr>
<tr>
<th scope="row">md / square</th>
<td>
<button class="btn btn-default btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-md btn-square">C</btn>
</td>
<td>
<button class="btn btn-primary btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-md btn-square">C</btn>
</td>
<td>
<button class="btn btn-info btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-md btn-square">C</btn>
</td>
<td>
<button class="btn btn-success btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-md btn-square">C</btn>
</td>
<td>
<button class="btn btn-warning btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-md btn-square">C</btn>
</td>
<td>
<button class="btn btn-danger btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-md btn-square">C</btn>
</td>
<td>
<button class="btn btn-link btn-md btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-md btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-md btn-square">C</btn>
</td>
</tr>
<tr>
<th scope="row">lg / round</th>
<td>
<button class="btn btn-default btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-lg btn-round">C</btn>
</td>
<td>
<button class="btn btn-primary btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-lg btn-round">C</btn>
</td>
<td>
<button class="btn btn-info btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-lg btn-round">C</btn>
</td>
<td>
<button class="btn btn-success btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-lg btn-round">C</btn>
</td>
<td>
<button class="btn btn-warning btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-lg btn-round">C</btn>
</td>
<td>
<button class="btn btn-danger btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-lg btn-round">C</btn>
</td>
<td>
<button class="btn btn-link btn-lg btn-round">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-lg btn-round">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-lg btn-round">C</btn>
</td>
</tr>
<tr>
<th scope="row">lg / square</th>
<td>
<button class="btn btn-default btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-default btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-default btn-lg btn-square">C</btn>
</td>
<td>
<button class="btn btn-primary btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-primary btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-primary btn-lg btn-square">C</btn>
</td>
<td>
<button class="btn btn-info btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-info btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-info btn-lg btn-square">C</btn>
</td>
<td>
<button class="btn btn-success btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-success btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-success btn-lg btn-square">C</btn>
</td>
<td>
<button class="btn btn-warning btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-warning btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-warning btn-lg btn-square">C</btn>
</td>
<td>
<button class="btn btn-danger btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-danger btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-danger btn-lg btn-square">C</btn>
</td>
<td>
<button class="btn btn-link btn-lg btn-square">A</button>
</td>
<td>
<btn disabled="disabled" class="btn btn-link btn-lg btn-square">B</btn>
</td>
<td>
<btn class="active btn btn-link btn-lg btn-square">C</btn>
</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
CSS代码(style.css):
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","����","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
body{padding:1em;}
table{margin:0 auto;text-align:center;}
table th,table td{vertical-align:middle !important;}
.btn,.btn:active,.btn:focus{outline:none !important;}
.btn{position:relative;z-index:1;text-shadow:0 -1px 0 rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.3);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);box-shadow:0 1px 2px rgba(0,0,0,0.2);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.btn:before,.btn:after{content:'';display:block;position:absolute;top:0;left:0;right:0;z-index:-1;}
.btn:after{height:50%;background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,rgba(255,255,255,0.5)),color-stop(100%,rgba(255,255,255,0.3)));background:-moz-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0.3));background:-webkit-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0.3));background:linear-gradient(to bottom,rgba(255,255,255,0.5),rgba(255,255,255,0.3));-moz-border-image:-moz-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;-moz-border-image:linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;-o-border-image:linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;-webkit-border-image:-webkit-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;-webkit-border-image:linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;border-image:-moz-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;border-image:-webkit-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;border-image:linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.1)) 1 1 0 stretch;border-width:1px 1px 0;}
.btn:before{bottom:0;background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-moz-radial-gradient(bottom center,rgba(0,0,0,0),rgba(0,0,0,0.2));background:-webkit-radial-gradient(bottom center,rgba(0,0,0,0),rgba(0,0,0,0.2));background:radial-gradient(bottom center,rgba(0,0,0,0),rgba(0,0,0,0.2));-moz-border-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;-moz-border-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;-o-border-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;-webkit-border-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;-webkit-border-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;border-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;border-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;border-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0)) 0 0 1 stretch;border-width:0 0 1px;}
.btn:hover:before,.btn:active:before,.btn.active:before{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-moz-radial-gradient(bottom center,rgba(255,255,255,0.3),rgba(0,0,0,0.2));background:-webkit-radial-gradient(bottom center,rgba(255,255,255,0.3),rgba(0,0,0,0.2));background:radial-gradient(bottom center,rgba(255,255,255,0.3),rgba(0,0,0,0.2));}
.btn:active,.btn.active{-moz-box-shadow:inset 0 5px 10px rgba(0,0,0,0.2),inset 0 0 3px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.5),0 -1px 0 rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 5px 10px rgba(0,0,0,0.2),inset 0 0 3px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.5),0 -1px 0 rgba(0,0,0,0.5);box-shadow:inset 0 5px 10px rgba(0,0,0,0.2),inset 0 0 3px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.5),0 -1px 0 rgba(0,0,0,0.5);color:#ddd;}
.btn:active:after,.btn.active:after{display:none;}
.btn:active:before,.btn.active:before{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.2)));background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.2));background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.2));border:none;}
.btn.btn-square{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
.btn.btn-default{text-shadow:0 1px rgba(255,255,255,0.6);}
.btn.btn-default:active,.btn.btn-default.active{color:#000;}
.btn.btn-default:before{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background:-moz-radial-gradient(bottom center,rgba(0,0,0,0),rgba(0,0,0,0.1));background:-webkit-radial-gradient(bottom center,rgba(0,0,0,0),rgba(0,0,0,0.1));background:radial-gradient(bottom center,rgba(0,0,0,0),rgba(0,0,0,0.1));}
.btn.btn-default:before:hover{-moz-border-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;-moz-border-image:linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;-o-border-image:linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;-webkit-border-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;-webkit-border-image:linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;border-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;border-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;border-image:linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0)) 0 0 1 stretch;}
.btn.btn-link{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;}
.btn.btn-link:before,.btn.btn-link:after{display:none;}
.btn.btn-link:active,.btn.btn-link.active{color:#428bca;}
分享到QQ
分享到微博
微信扫一扫
