<!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>纯CSS3实现线条按钮动画特效 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/demo1.css">
</head>
<body>
<br>
<div class="zzsc-demo center">
<a href="index.html" class="current">DEMO1</a>
<a href="index2.html">DEMO2</a>
</div>
<div class="demo1">
<div class="container">
<div class="row pad-15">
<div class="col-sm-3">
<a href="#" class="btn btn-lg red">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-lg blue">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-lg orange">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-lg green">button</a>
</div>
</div>
<div class="row pad-15">
<div class="col-sm-3">
<a href="#" class="btn btn-sm red">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-sm blue">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-sm orange">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-sm green">button</a>
</div>
</div>
<div class="row pad-15">
<div class="col-sm-3">
<a href="#" class="btn btn-xs red">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-xs blue">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-xs orange">button</a>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-xs green">button</a>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>