Blog

JQuery script to get nice style on a button

By Sateesh Arveti Blogs | JQuery Jul 02, 2010
Below script gives nice mouseover effect for a button

   <style type="text/css">
        .btn
        {
            color: black;
            font: bold 95% 'trebuchet ms' ,helvetica,sans-serif;
            background-color: white;
            border: 1px solid;
            border-color: #696 #363 #363 #696;
            filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr= 'white' ,EndColorStr= '#ffeeddaa' );
        }
        .btnhov
        {
            background-color: orange;
            font: bold 95% 'trebuchet ms' ,helvetica,sans-serif;
            filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr= 'orange' ,EndColorStr= 'orange' );
            border: 1px solid;
            border-color: #696 #363 #363 #696;
            color: White;
        }
    </style>

<script type="text/javascript">
        $(function() {
            $('input[type="button"]').attr('class', 'btn');
            $('input[type="button"]').mouseover(function() { $(this).attr('class', 'btnhov'); });
            $('input[type="button"]').mouseout(function() { $(this).attr('class', 'btn'); });
        });
    </script>

dd.bmp
COMMENT USING