easyui-linkbutton 改变按钮样式

怎样改变easyui-linkbutton按钮的样式呢？请看本文给大家介绍的一种方法。

先看效果图：

样式代码这样：

<style>
#test .l-btn{
    color:red;
    color: #fff;
    border-color: #3c8b3c;
    background: #4cae4c;
    background: -webkit-linear-gradient(top,#4cae4c 0,#449d44 100%);
    background: -moz-linear-gradient(top,#4cae4c 0,#449d44 100%);
    background: -o-linear-gradient(top,#4cae4c 0,#449d44 100%);
    background: linear-gradient(to bottom,#4cae4c 0,#449d44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cae4c,endColorstr=#449d44,GradientType=0);

}
#test .l-btn-selected, .l-btn-selected:hover{
    background:rgb(230, 126, 34);
    color:#fff;
    border:0px;
}
</style>

html代码如下：

    <div class="easyui-panel" style="padding:5px;" id="test">
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">Button 2</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 3</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 4</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 5</a>
    </div>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 1</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true,selected:true">Button 2</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 3</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 4</a>
        <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 5</a>
    </div>