Hi all,

I have an ASP.NET web form with UI buttons to popup bootstrap modals as following:

              <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3">
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 ">
                    <button id="btn1" type="button" class="btn btn-danger btn-lg gray-background white custom" data-toggle="modal" data-target="#editFruitsModal">
                        Fruits 
                    </button>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 ">
                    <button id="btn2" type="button" class="btn btn-danger btn-lg gray-background white custom" data-toggle="modal" data-target="#editFoodsModal">Foods</button>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 ">
                    <button id="btn3" type="button" class="btn btn-danger btn-lg gray-background white custom" data-toggle="modal" data-target="#editDrinksModal">Drinks</button>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3">
                </div>
            </div>

            <div class="modal fade" id="editFruitsModal" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" class="glyphicon glyphicon-remove-sign"></span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Fruits</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-vertical" role="form">
                                        <div class="form-group form-group-sm">
                                            <div class="col-md-3" style="text-align: center;">
                                                <label class="btn btn-default btn-lg" style="width: 180px; padding: 5px; text-decoration: underline; font-weight: bold; font-style: normal; font-variant: small-caps; color: black; background-color: white">
                                                    Apple                   
                                                </label>
                                                <input type="checkbox" runat="server" id="cbApple" data-toggle="toggle" data-width="80" data-height="60" data-on="YES" data-off="NO">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-vertical" role="form">
                                        <div class="form-group form-group-sm">
                                            <div class="col-md-3" style="text-align: center;">
                                                <label class="btn btn-default btn-lg" style="width: 180px; padding: 5px; text-decoration: underline; font-weight: bold; font-style: normal; font-variant: small-caps; color: black; background-color: white">
                                                    Kiwi                  
                                                </label>
                                                <input type="checkbox" runat="server" id="cbKiwi" data-toggle="toggle" data-width="80" data-height="60" data-on="YES" data-off="NO">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-vertical" role="form">
                                        <div class="form-group form-group-sm">
                                            <div class="col-md-3" style="text-align: center;">
                                                <label class="btn btn-default btn-lg" style="width: 180px; padding: 5px; text-decoration: underline; font-weight: bold; font-style: normal; font-variant: small-caps; color: black; background-color: white">
                                                    Pear                  
                                                </label>
                                                <input type="checkbox" runat="server" id="cbPear" data-toggle="toggle" data-width="80" data-height="60" data-on="YES" data-off="NO">
                                            </div>
                                        </div>
                                    </div>
                               </div>
                             </div>
                        </div>   							   
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <asp:Button runat="server" ID="btnSaveFruits" CssClass="btn btn-primary" Text="Save" OnClick="btnSaveFruits_Click"
                                OnClientClick="closeModal();" CausesValidation="false" />
                        </div>
                    </div>
                </div>
            </div>

and CSS 

<style type="text/css">
        .gray-background {
            background-color: gray;
        }

        .blue-background {
            background-color: blue;
        }

        .white {
            color: #ffffff;
        }

        .custom {
            height: 80px !important;
            width: 180px !important;
        }
    </style>

 protected void btnSaveFruits_Click(object sender, EventArgs e)
 {
   // Code to save data into database
 }

I would like to highlight blue color for all buttons when I click on them to popup the modals. I have a trouble to keep color not change when perform data saving using ASP.NET button during post back.  

Any solution in JavaScript or jquery code to solve my problem? Thanks in advance.