Kendo ButtonGroup Styling

by kendomobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src=" http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="view" >
    <ul id="listButtons" data-role="buttongroup" >
        <li data-icon="camera" style="background-color:green; 
                   color:white;
                   font-style:italic">
            button 1
        </li>
        <li> button 2 </li>
        <li style="background-color:orange;
                   color:white;">
            button 3
        </li>
    </ul>  
    
    <div>
        <ul id="listButtons2" data-role="buttongroup" >
        <li >
            button 1
        </li>
        <li> button 2 </li>
        <li >
            button 3
        </li>
    </ul>  
        
    </div>
    
</div>

CSS

#listButtons2   .km-button
{
    background-color: red;
}

#listButtons2 .km-button .km-text
{
   color: white;
}

JavaScript

var app = new kendo.mobile.Application(document.body);