精美纯css按钮美化大全立体圆形

Flat Buttons

<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-pill button-flat-primary">press me</a>
<a href="#" class="button button-flat-primary">press me</a>
<a href="#" class="button button-circle button-flat-primary">press me</a>

Icon Buttons (icons provided by Font Awesome)

<a href="#" class="button button-rounded button-flat"><i class="fa fa-github"></i> press me</a>
<a href="#" class="button button-rounded button-flat-primary"><i class="fa fa-refresh"></i> press me</a>
<a href="#" class="button button-rounded button-flat-action"><i class="fa fa-cloud"></i> press me</a>
<a href="#" class="button button-rounded button-flat-highlight"><i class="fa fa-camera"></i> press me</a>
<a href="#" class="button button-rounded button-flat-caution"><i class="fa fa-code"></i> press me</a>
<a href="#" class="button button-rounded button-flat-royal"><i class="fa fa-download"></i> press me</a>

Glow Buttons

<a href="#" class="button glow button-rounded button-flat">press me</a>
<a href="#" class="button glow button-rounded button-flat-primary">press me</a>
<a href="#" class="button glow button-rounded button-flat-action">press me</a>
<a href="#" class="button glow button-rounded button-flat-highlight">press me</a>
<a href="#" class="button glow button-rounded button-flat-caution">press me</a>
<a href="#" class="button glow button-rounded button-flat-royal">press me</a>

Rounded Buttons

<a href="#" class="button button-rounded">press me</a>
<a href="#" class="button button-rounded button-primary">press me</a>
<a href="#" class="button button-rounded button-action">press me</a>
<a href="#" class="button button-rounded button-highlight">press me</a>
<a href="#" class="button button-rounded button-caution">press me</a>
<a href="#" class="button button-rounded button-royal">press me</a>

Pill Buttons

<a href="#" class="button button-pill">press me</a>
<a href="#" class="button button-pill button-primary">press me</a>
<a href="#" class="button button-pill button-action">press me</a>
<a href="#" class="button button-pill button-highlight">press me</a>
<a href="#" class="button button-pill button-caution">press me</a>
<a href="#" class="button button-pill button-royal">press me</a>

Border Buttons

<a href="#" class="button button-border">press me</a>
<a href="#" class="button button-border-primary button-rounded">press me</a>
<a href="#" class="button button-border-action button-pill">press me</a>
<a href="#" class="button button-border-highlight button-circle">press me</a>
<a href="#" class="button button-border-caution"><i class="fa fa-camera"></i> press me</a>
<a href="#" class="button button-border-royal">press me</a>

3D Buttons

<a href="#" class="button button-3d">press me</a>
<a href="#" class="button button-3d-primary button-rounded">press me</a>
<a href="#" class="button button-3d-action button-pill">press me</a>
<a href="#" class="button button-3d-highlight button-circle">press me</a>
<a href="#" class="button button-3d-caution"><i class="fa fa-camera"></i> press me</a>
<a href="#" class="button button-3d-royal">press me</a>

Square Buttons

<a href="#" class="button">press me</a>
<a href="#" class="button button-primary">press me</a>
<a href="#" class="button button-action">press me</a>
<a href="#" class="button button-highlight">press me</a>
<a href="#" class="button button-caution">press me</a>
<a href="#" class="button button-royal">press me</a>

Circle Buttons

<a href="#" class="button button-circle">press me</a>
<a href="#" class="button button-circle button-primary">press me</a>
<a href="#" class="button button-circle button-action">press me</a>
<a href="#" class="button button-circle button-highlight">press me</a>
<a href="#" class="button button-circle button-caution">press me</a>
<a href="#" class="button button-circle button-royal">press me</a>

Dropdown Buttons (Include jQuery & buttons.js)

<span class="button-dropdown" data-buttons="dropdown">
    <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>
    <ul>
         <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
         <li><a href="http://twitter.com">Twitter</a></li>
         <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
    </ul>
</span>

<span class="button-dropdown" data-buttons="dropdown">
    <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>

    <!-- Dropdown Below Button -->
    <ul class="button-dropdown-menu-below">
         <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
         <li><a href="http://twitter.com">Twitter</a></li>
         <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
    </ul>
</span>

<span class="button-dropdown" data-buttons="dropdown">
    <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>

    <!-- Dropdown Above Button -->
    <ul class="button-dropdown-menu-above">
         <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
         <li><a href="http://twitter.com">Twitter</a></li>
         <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
    </ul>
</span>

Block Buttons

press me
press me
press me
press me
press me
press me

<a href="#" class="button button-block button-rounded button-primary button-large">press me</a>

Button Sizes

<a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

Button Wrappers

<span class="button-wrap"><a href="#" class="button button-circle">press me</a></span>
<span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span>
<span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span>
<span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span>

Button Groups

<div class="button-group">
    <button type="button" class="button">Option 1</button>
    <button type="button" class="button">Option 2</button>
    <button type="button" class="button">Option 3</button>
</div>
<div class="button-group">
    <button type="button" class="button button-primary">Option 1</button>
    <button type="button" class="button button-primary">Option 2</button>
    <button type="button" class="button button-primary">Option 3</button>
</div>
<div class="button-group">
    <button type="button" class="active button button-pill">Option 1</button>
    <button type="button" class="button button-pill">Option 2</button>
    <button type="button" class="button button-pill">Option 3</button>
</div>
<div class="button-group">
    <button type="button" class="button button-pill button-action">Option 1</button>
    <button type="button" class="button button-pill button-action">Option 2</button>
    <button type="button" class="button button-pill button-action">Option 3</button>
</div>
<div class="button-group">
    <button type="button" class="button button-rounded">Option 1</button>
    <button type="button" class="button button-rounded">Option 2</button>
    <button type="button" class="button button-rounded">Option 3</button>
</div>
<div class="button-group">
    <button type="button" class="button button-flat-primary">Option 1</button>
    <button type="button" class="button button-flat-primary">Option 2</button>
    <button type="button" class="button button-flat-primary">Option 3</button>
</div>

Form Elements Work Too

press me

<input type="submit" value="press me" class="button button-pill button-primary"/>
<button class="button button-pill button-primary">press me</button>

<!-- DISABLED BUTTONS -->
<input  disabled type="submit"  value="press me" class="button button-pill button-primary"/>
<button disabled class="button  button-pill button-primary">press me</button>
<a href="#" class="button disabled button-pill button-primary">press me</a>