按鈕組樣式

<ul class="buttongroup">
	<li><a id="btn_copy" href="<?php echo $this->webroot;?>CardPurchaseDetails/add/<?php echo $detail_id?>" class="a_demo_two "  rel="leanModal"  >再次購買</a></li>
	<li><a id="btn_activate" href="#Activate" class="a_demo_two " rel="leanModal" >&nbsp;激活&nbsp;</a></li>
	<li><a id="btn_disable" href="#Disable" class="a_demo_two" rel="leanModal" >&nbsp;停卡&nbsp;</a></li>
</ul>
<ul class="buttongroup">
	<li><a id="btn_suspend" href="#Suspend" class="a_demo_two" rel="leanModal" >臨時停卡</a></li>
	<li><a id="btn_update" href="#Update" class="a_demo_two" rel="leanModal" >編輯信息</a></li>
	<li><a id="btn_change" href="#Change" class="a_demo_two" rel="leanModal" >變更套餐</a></li>
<!--本來各個class裏面是btn_action被我改成了a_demo_two-->
</ul>

-------------css---

/*進度_按鈕*/
.a_demo_two {
    background-color: #3bb3e0 ;

    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(44,160,202)),
            color-stop(1, rgb(62,184,229))
    );
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 0px #fff;
    -moz-box-shadow: 0px 1px 0px #fff;
    -o-box-shadow: 0px 1px 0px #fff;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active {
    color:#156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background:rgb(44,160,202);
    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
    top:7px;
}

.a_demo_two:active::before {
    top:-2px;
}
/*爲了讓ul浮動 好讓按鈕組在兩排分別顯示三個*/
.buttongroup{
    float: left;
}

顯示效果：

詳細效果和內容詳見：http://www.cssmoban.com/code/button/index.shtml