几个纯CSS3构架的动态按钮

我把他们规整到我的code里面，调用起来非常实用简单

引入

<link rel="stylesheet" href="//code.xulgr.com/css/button/xulgr.css" media="screen" type="text/css" />

 

调用代码如下

<!--按钮形式一-->
<div id="button">
<div id="second">
<a href="#">Hi Xulgr</a>
<div id="Third">
<a href="#">Hi Xulgr</a>
</div></div>
<div id="first">
<a href="#">Welcome Xulgr</a>
</div></div>
<!--按钮形式二-->
<h2>Buttons with Radius</h2>
<a class="btn btn-medium btn-blue btn-radius" href="#">Download</a>
<a class="btn btn-medium btn-green btn-radius" href="#">Sign Up</a>
<a class="btn btn-medium btn-orange btn-radius" href="#">Sign In</a>
<a class="btn btn-medium btn-red btn-radius" href="#">Read More</a>
<a class="btn btn-medium btn-gray btn-radius" href="#">Forgot Password</a>

<hr />

<h2>Medium Buttons</h2>
<a class="btn btn-medium btn-blue" href="#">Download</a>
<a class="btn btn-medium btn-green" href="#">Sign Up</a>
<a class="btn btn-medium btn-orange" href="#">Sign In</a>
<a class="btn btn-medium btn-red" href="#">Read More</a>
<a class="btn btn-medium btn-gray" href="#">Forgot Password</a>

<hr />

<h2>Small Buttons</h2>
<a class="btn btn-small btn-blue" href="#">Download</a>
<a class="btn btn-small btn-green" href="#">Sign Up</a>
<a class="btn btn-small btn-orange" href="#">Sign In</a>
<a class="btn btn-small btn-red" href="#">Read More</a>
<a class="btn btn-small btn-gray" href="#">Forgot Password</a>

<hr />

<h2>Large Buttons</h2>
<a class="btn btn-large btn-blue" href="#">Download</a>
<a class="btn btn-large btn-green" href="#">Sign Up</a>
<a class="btn btn-large btn-orange" href="#">Sign In</a>
<a class="btn btn-large btn-red" href="#">Read More</a>
<a class="btn btn-large btn-gray" href="#">Forgot Password</a>

 

效果演示：https://code.xulgr.com/pub/css/button