Blog

JQuery script to get nice style on a button

Posted 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
post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.